vue video倍速控制

你可以使用HTML5 Video的playbackRate属性来控制视频的倍速。在Vue中，你可以使用v-bind指令将数据绑定到video元素的playbackRate属性上，并使用v-on指令绑定事件监听器，以便在用户点击控制按钮时更新播放速度。以下是一个简单的实现示例：

<template>
  <div>
    <video ref="videoPlayer" controls></video>
    <div>
      <button @click="playbackRate -= 0.25" :disabled="playbackRate <= 0.25">-</button>
      <span>{{ playbackRate }}x</span>
      <button @click="playbackRate += 0.25" :disabled="playbackRate >= 2.0">+</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playbackRate: 1.0
    };
  },
  mounted() {
    const videoPlayer = this.$refs.videoPlayer;
    videoPlayer.src = "path/to/video.mp4";
  },
  watch: {
    playbackRate(newVal) {
      this.$refs.videoPlayer.playbackRate = newVal;
    }
  }
};
</script>

在上面的示例中，我们使用了一个video元素和三个按钮来控制播放速度。playbackRate属性存储当前的播放速度，我们在按钮的点击事件中通过改变playbackRate的值来更新播放速度。我们还使用了一个watch监听器来在playbackRate改变时更新video元素的playbackRate属性。