在vue项目中如何获取视频的时长

Vue是一款非常流行的前端框架，它可以帮助开发者快速便捷地开发web应用程序。如果您正在开发一个视频播放页面，想要获取视频的时长，那么下面介绍一些方法。

方法1：使用HTML5 video标签的duration属性

HTML5的video标签提供了一个duration属性，它可以获取视频的时长。

<video id="myVideo">
   <source src="myvideo.mp4" type="video/mp4">
</video>

<script>
   const video = document.getElementById('myVideo');
   const duration = video.duration;
</script>

可以使用Vue的created钩子函数来获取视频的时长并绑定到Vue实例的data中。

<template>
   <div>
      <video ref="myVideo" @durationchange="getDuration">
         <source src="myvideo.mp4" type="video/mp4">
      </video>
      <p>{{duration}}</p>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            duration: '',
         };
      },
      created() {
         const video = this.$refs.myVideo;
         this.duration = video.duration;
      },
      methods: {
         getDuration(event) {
            this.duration = event.target.duration;
         },
      },
   };
</script>

方法2：使用第三方库

除了直接使用HTML5 video标签之外，还可以使用一些第三方库来获取视频的时长，例如video.js和plyr等库。

使用video.js获取视频的时长：

<template>
   <div>
      <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
         <source src="myvideo.mp4" type="video/mp4">
      </video>
      <p>{{duration}}</p>
   </div>
</template>

<script>
   import videojs from 'video.js';
   import 'video.js/dist/video-js.css';
   export default {
      data() {
         return {
            duration: '',
         };
      },
      mounted() {
         const player = videojs('my-video');
         player.on('loadedmetadata', () => {
            this.duration = player.duration();
         });
      },
   };
</script>

使用plyr获取视频的时长：

<template>
   <div>
      <video id="myVideo" controls>
         <source src="myvideo.mp4" type="video/mp4">
      </video>
      <p>{{duration}}</p>
   </div>
</template>

<script>
   import * as Plyr from 'plyr';
   import 'plyr/dist/plyr.css';
   export default {
      data() {
         return {
            duration: '',
         };
      },
      mounted() {
         const player = new Plyr('#myVideo');
         player.on('loadedmetadata', () => {
            this.duration = player.duration;
         });
      },
   };
</script>

方法3：使用媒体信息API

使用媒体信息API可以获取视频的详细信息，包括时长、宽高、编码方式等。

<template>
   <div>
      <video ref="myVideo"></video>
      <p>{{duration}}</p>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            duration: '',
         };
      },
      mounted() {
         const video = this.$refs.myVideo;
         video.src = 'myvideo.mp4';
         video.addEventListener('loadedmetadata', () => {
            const mediaInfo = video.getVideoPlaybackQuality();
            this.duration = mediaInfo.totalVideoFrames / mediaInfo.frameRate;
         });
      },
   };
</script>

总结

以上介绍了Vue项目中获取视频时长的几种方法，可以根据具体情况选择使用哪种方法。无论是使用HTML5 video标签还是第三方库，都可以实现获取视频时长的功能，有利于开发者更好地展示和控制视频播放。