使用HTML5的video标签和JavaScript:
<template> <video ref="video" autoplay controls loop muted @loadedmetadata="getVideoDuration"> <source src="https://desktop-yikao.oss-cn-beijing.aliyuncs.com/avatar/kaissp.mp4" type="video/mp4"> </video> </template> <script> export default { methods: { getVideoDuration() { const videoElement = this.$refs.video; const duration = videoElement.duration; console.log(duration); } } } </script>
使用Vue的@load事件:
<template> <video ref="video" @load="getVideoDuration" :src="videoSource"></video> </template> <script> export default { data() { return { videoSource: "your_video_source", }; }, methods: { getVideoDuration() { const videoElement = this.$refs.video; const duration = videoElement.duration; console.log(duration); } } } </script>
使用第三方库,如video.js:
<template> <video ref="video" class="video-js"></video> </template> <script> import videojs from "video.js"; import "video.js/dist/video-js.css"; export default { mounted() { this.initVideoPlayer(); }, methods: { initVideoPlayer() { const videoElement = this.$refs.video; const player = videojs(videoElement); player.on("loadedmetadata", () => { const duration = player.duration(); console.log(duration); }); player.src("your_video_source"); } } } </script>
PHP自动获取视频时长的方法
2024-07-21 16:58:03 43 阅读