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 属性来获取视频的总时间，并将其打印到控制台上。

相关问题

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中获取视频总时长的方法。

vue video.js 实现进度条拖动

Vue Video.js是一个基于Vue.js和Video.js的HTML5视频播放器组件，可以帮助我们快速搭建一个美观实用的视频播放器。在Vue Video.js中，要实现进度条拖动，需要做以下几个步骤：

1.首先，在Vue Video.js中，可以通过vjs-player组件来实现视频播放功能，我们需要给这个组件添加ref属性，以便在后面使用。

2.在vjs-player的mounted生命周期中，我们可以通过this.$refs.player来获取到video.js的player对象，然后通过player.on方法来监听时间变化事件。

3.在监听事件中，可以获取到当前播放的时间和视频总时长，从而计算出当前进度条的位置。同时，也可以监听进度条的mousedown和mousemove事件，来实现进度条拖动的功能。

4.最后，在进度条拖动结束的时候，需要通过player.currentTime()方法来设置视频的当前播放时间。

下面是相关代码片段:

<template>
  <div>
    <vjs-player ref="player" :options="playerOptions"></vjs-player>
    <div class="progress-bar-wrap">
      <div class="progress-bar" ref="progressBar" @mousedown="onProgressBarMouseDown($event)">
        <div class="progress-bar-inner" :style="{width: progressWidth}"></div>
        <div class="progress-bar-thumb" :style="{left: progressWidth}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'https://example.com/path/to/video.mp4',
          type: 'video/mp4'
        }]
      },
      progressWidth: 0,
      isDragging: false
    }
  },
  mounted() {
    const player = this.$refs.player.$player
    player.on('timeupdate', () => {
      const currentTime = player.currentTime()
      const duration = player.duration()
      this.progressWidth = `${(currentTime / duration) * 100}%`
    })
    document.addEventListener('mousemove', this.onDocumentMouseMove)
    document.addEventListener('mouseup', this.onDocumentMouseUp)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onDocumentMouseMove)
    document.removeEventListener('mouseup', this.onDocumentMouseUp)
  },
  methods: {
    onProgressBarMouseDown(event) {
      this.isDragging = true
      this.onDocumentMouseMove(event)
    },
    onDocumentMouseMove(event) {
      if (!this.isDragging) return
      const progressBar = this.$refs.progressBar
      const rect = progressBar.getBoundingClientRect()
      const progressWidth = ((event.clientX - rect.left) / rect.width) * 100
      this.progressWidth = `${Math.min(Math.max(progressWidth, 0), 100)}%`
    },
    onDocumentMouseUp() {
      if (!this.isDragging) return
      const player = this.$refs.player.$player
      const duration = player.duration()
      player.currentTime(duration * (parseInt(this.progressWidth) / 100))
      this.isDragging = false
    }
  }
}
</script>

<style>
.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background-color: #f2f2f2;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.progress-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #00bfff;
}

.progress-bar-thumb {
  position: absolute;
  top: -5px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #00bfff;
}
</style>