vue2 获取视频总时间以及播放时间

在 Vue2 中，你可以同时获取视频的总时间以及播放时间。你可以在 mounted 钩子函数中添加两个事件监听器，一个用于获取视频的总时间，另一个用于实时获取视频的播放时间。下面是一个示例代码：

<template>
  <div>
    <video ref="videoPlayer" controls>
      <source src="my-video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  mounted() {
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.addEventListener('loadedmetadata', () => {
      console.log('视频总时间', videoPlayer.duration);
    });
    videoPlayer.addEventListener('timeupdate', () => {
      console.log('当前播放时间', videoPlayer.currentTime);
    });
  },
}
</script>

在上面的示例中，我们同样在模板中定义了一个 video 元素，并使用 ref 属性来获取该元素的引用，在 mounted 钩子函数中添加了两个事件监听器。一个是 loadedmetadata 事件监听器，用于获取视频的总时间；另一个是 timeupdate 事件监听器，用于实时获取视频的播放时间。当视频的元数据加载完成后，loadedmetadata 事件会被触发，我们可以通过 $refs 属性来获取 video 元素，并使用 videoPlayer.duration 属性来获取视频的总时间，并将其打印到控制台上。每当视频播放时间发生变化时，timeupdate 事件会被触发，我们同样可以通过 $refs 属性来获取 video 元素，并使用 videoPlayer.currentTime 属性来获取当前播放时间，并将其打印到控制台上。