vue2中video标签禁止拉进度条

可以通过监听 video 的 timeupdate 事件，在该事件中强制设置当前播放时间为视频的起始时间，从而达到禁止拉进度条的效果。

具体实现代码如下：

<template>
  <div>
    <video ref="video" src="./video.mp4" @timeupdate="onTimeUpdate" />
  </div>
</template>

<script>
export default {
  methods: {
    onTimeUpdate() {
      this.$refs.video.currentTime = 0;
    },
  },
};
</script>

相关问题

vue video标签显示进度条

在Vue中，要在`<video>`标签中添加一个进度条来显示视频播放进度，你可以利用HTML5的`controls`属性，并结合JavaScript来监听`timeupdate`事件。这里是一个简单的示例：

<template>
  <div>
    <video ref="myVideo" :src="videoSrc" controls></video>
    <progress :value="currentProgress" max="100"></progress>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 初始化视频源
const videoSrc = "your-video-source.mp4";
// 初始化当前进度到0
const currentProgress = ref(0);

// 监听video元素的timeupdate事件
watch(() => currentProgress.value, () => {
  const videoElement = document.querySelector('#myVideo').currentTime; // 获取当前时间
  const progressBar = document.querySelector('progress'); // 获取进度条
  progressBar.value = Math.round(videoElement * 100); // 计算进度百分比并更新进度条值
});
</script>

在这个例子中，我们使用了`ref`来引用`<video>`元素，通过`currentTime`属性获取当前播放时间。每当视频的播放进度变化时，`timeupdate`事件触发，我们计算出进度百分比并更新`<progress>`元素的`value`。

vue-video-player显示进度条

要在vue-video-player中显示进度条，可以使用插件自带的控制条。控制条中包含了进度条，可以通过设置控制条的属性来控制进度条的显示。

以下是一个简单的例子，演示如何在vue-video-player中显示进度条：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
 </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: {
        controls: true, // 显示控制条
        autoplay: false,
        sources: [{
          src: 'http://example.com/path/to/video.mp4',
          type: 'video/mp4'
        }]
      }
    }
  }
}
</script>

在上面的例子中，我们设置了控制条的属性`controls`为`true`，这样就会在视频播放器下方显示控制条，其中包含了进度条。