vue2使用video加载进度

在Vue 2中，您可以使用`@progress`事件来监听视频加载进度。以下是一个示例：

<template>
  <div>
    <video :src="videoUrl" @progress="handleProgress"></video>
    <p>{{ loadedPercentage }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'path/to/your/video.mp4',
      loadedPercentage: 0
    }
  },
  methods: {
    handleProgress(event) {
      const { loaded, total } = event.target;
      this.loadedPercentage = (loaded / total) * 100;
    }
  }
}
</script>

在上述示例中，我们使用了`@progress`事件来监测视频加载的过程。在事件处理方法`handleProgress`中，我们计算加载的百分比并将其存储在`loadedPercentage`变量中。然后，我们在模板中使用插值绑定将加载百分比显示出来。

确保`videoUrl`变量指定了正确的视频资源路径。

希望以上信息对您有所帮助！

相关问题

vue-video-player自动跳转到上次播放进度

回答: 要实现vue-video-player自动跳转到上次播放进度，你可以使用video-player组件提供的timeupdate事件监听视频播放的时间更新。当时间更新时，你可以将当前的播放时间保存在localStorage中。下次加载页面时，你可以从localStorage中读取上次保存的播放时间，并通过设置video-player组件的currentTime属性将视频跳转到该时间点。具体的实现可以参考以下代码引用：

// 在Vue组件中的代码
<template>
  <div>
    <video-player ref="videoPlayer" @timeupdate="onPlayerTimeupdate"></video-player>
  </div>
</template>

<script>
export default {
  methods: {
    onPlayerTimeupdate(event) {
      const currentTime = event.target.currentTime;
      localStorage.setItem('playbackTime', currentTime);
    },
    playVideo() {
      const playbackTime = localStorage.getItem('playbackTime');
      if (playbackTime) {
        this.$refs.videoPlayer.currentTime = parseFloat(playbackTime);
      }
      this.$refs.videoPlayer.play();
    }
  },
  mounted() {
    this.playVideo();
  }
}
</script>

这个例子中，我们在video-player组件上添加了timeupdate事件的监听器，在事件处理函数中，我们将视频当前的播放时间保存在localStorage中。当页面加载完成后，我们在mounted钩子函数中读取上一次保存的播放时间，并将视频跳转到该播放时间点。

请注意，该例子是基于Vue环境下的实现，如果你是在其他框架或环境中使用vue-video-player，你需要适当调整代码以适应你的环境。

vue3播放video，进度条放视频外面

在Vue3中，要在视频外部显示进度条，你可以通过以下步骤来实现：

1. 首先，在HTML中创建一个`<video>`标签和一个外部的`<progress>`元素，例如：

<template>
  <div class="player">
    <video ref="videoPlayer" :src="videoSrc" @loadedmetadata="onVideoLoaded"></video>
    <div class="progress-bar-container">
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

2. 然后，在CSS中设置进度条的位置和样式，通常将它放在`<video>`下方或旁边：

.progress-bar-container {
  position: relative;
  margin-top: 10px;
}

.progress {
  width: 100%;
  height: 10px;
  background-color: lightgray;
}

3. 定义数据属性来管理视频和进度：

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

const videoSrc = "your_video_url";
const videoPlayer = ref(null);
let progress = ref(0);

// 视频加载完成后更新进度条
function onVideoLoaded() {
  videoPlayer.value.addEventListener('timeupdate', handleTimeUpdate);
}

// 更新进度条值
function handleTimeUpdate() {
  const currentTime = videoPlayer.value.currentTime;
  progress.value = Math.floor(currentTime * 100); // 或者使用 videoPlayer.value.currentPercent
}
</script>

4. 在组件的生命周期钩子中初始化和卸载事件监听器：

mounted() {
  onVideoLoaded();
},
beforeUnmount() {
  videoPlayer.value.removeEventListener('timeupdate', handleTimeUpdate);
}

现在，你已经实现了在一个Vue3组件中，视频播放的进度可以在视频外部的进度条上实时显示。