uniapp如何实现倍速播放功能

在uniapp中开发音视频应用时，如何实现倍速播放功能？官方文档没有明确说明具体实现方式，尝试过修改video组件的playbackRate属性但没生效。请问有没有完整的代码示例或者可行的解决方案？需要支持H5和APP端兼容。

2 回复

使用uniapp的video组件，设置playbackRate属性即可。例如：<video :playback-rate="2.0"></video>，数值1.0为正常速度，2.0为2倍速。


在 UniApp 中实现倍速播放功能，可以通过 <video> 组件的 playbackRate 属性来控制视频的播放速度。以下是具体实现方法：

实现步骤

  1. 使用 <video> 组件：在页面中添加视频组件，并绑定播放速率属性。
  2. 设置播放速率：通过 playbackRate 属性调整播放速度（例如 0.5 表示 0.5 倍速，2.0 表示 2 倍速）。
  3. 动态修改速率：结合按钮或选择器，通过数据绑定动态切换播放速度。

示例代码

<template>
  <view>
    <!-- 视频组件 -->
    <video 
      :src="videoSrc" 
      :playback-rate="playbackRate" 
      controls 
      @play="onPlay"
    ></video>
    
    <!-- 倍速选择按钮 -->
    <view class="speed-controls">
      <button @click="setSpeed(0.5)">0.5x</button>
      <button @click="setSpeed(1.0)">1.0x</button>
      <button @click="setSpeed(1.5)">1.5x</button>
      <button @click="setSpeed(2.0)">2.0x</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/sample.mp4', // 替换为实际视频地址
      playbackRate: 1.0 // 初始播放速率
    };
  },
  methods: {
    setSpeed(rate) {
      this.playbackRate = rate; // 更新播放速率
    },
    onPlay() {
      // 确保视频播放时应用当前速率（部分平台需在播放后设置）
      this.$nextTick(() => {
        const videoContext = uni.createVideoContext('myVideo'); // 需设置 video 的 id
        videoContext.playbackRate(this.playbackRate);
      });
    }
  }
};
</script>

注意事项

  1. 平台差异：部分平台（如 iOS）可能对倍速播放有限制，需测试兼容性。
  2. 播放后设置：在某些情况下，需在视频开始播放后通过 createVideoContext 重新设置速率。
  3. 速率范围：通常支持 0.5~2.0 倍速，具体取决于平台和浏览器支持。

通过以上方法，即可在 UniApp 中灵活控制视频播放速度。

回到顶部