vue2获取视频时长

1. 使用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>

2. 使用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>

3. 使用第三方库，如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>