vue 获取视频总时间

在 Vue 中获取视频总时长可以通过以下步骤：

1. 在模板中使用<video>标签，并设置ref属性，方便在JS代码中获取该元素。

<video ref="videoPlayer" src="your-video-src"></video>

2. 在Vue组件的methods中定义一个方法，通过该方法获取视频的总时长。

methods: {
  getVideoDuration() {
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.addEventListener("loadedmetadata", () => {
      console.log(videoPlayer.duration);
    });
  }
}

通过addEventListener监听videoPlayer元素的loadedmetadata事件，在事件回调函数中获取videoPlayer.duration即可获取视频的总时长。注意，由于视频可能还未加载完毕，因此需要在该事件触发时再去获取总时长。

3. 在需要获取视频总时长的地方调用该方法即可。

<button @click="getVideoDuration">获取视频总时长</button>

以上就是在Vue中获取视频总时长的方法。

相关问题

vue2 获取视频总时间

Vue2 中同样可以通过 HTML5 的 video 元素来获取视频总时间。你可以在 Vue 的 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);
    });
  },
}
</script>

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

vue js获取视频总时间

获取视频总时间同样可以使用 HTML5 的 video 元素，可以通过 video 元素的 duration 属性来获取视频的总时间。下面是一个简单的示例代码：

<video id="my-video" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

<script>
  // 获取 video 元素
  const video = document.getElementById('my-video');

  // 监听 loadedmetadata 事件
  video.addEventListener('loadedmetadata', () => {
    // 获取视频总时间并打印到控制台
    console.log('视频总时间', video.duration);
  });
</script>

在上面的示例中，我们首先获取了 video 元素，然后添加了一个 loadedmetadata 事件监听器。该事件在视频的元数据（比如视频的长度、尺寸等）加载完成后触发，我们可以通过 video.duration 属性来获取视频的总时间，并将其打印到控制台上。