uniapp video 如何实现播放倍速功能

在uniapp中，video组件如何实现播放倍速功能？试过设置playbackRate属性但没效果，是需要特定平台支持还是缺少其他配置？求具体实现方法和兼容性说明。

2 回复

在uniapp中，video组件可通过playbackRate属性设置倍速播放。例如：<video :playback-rate="2.0" ...>，数值1.0为正常速度，2.0为2倍速。


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

核心步骤

  1. 设置 playbackRate 属性：控制视频播放速度，支持 0.5、1.0、1.25、1.5、2.0 等值。
  2. 通过按钮或菜单触发：用户点击后修改倍速值。

示例代码

<template>
  <view>
    <!-- 视频组件 -->
    <video 
      :src="videoSrc" 
      :playback-rate="playbackRate" 
      controls 
      @play="onPlay"
    ></video>
    
    <!-- 倍速选择按钮 -->
    <view class="speed-buttons">
      <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(() => {
        this.playbackRate = this.playbackRate;
      });
    }
  }
};
</script>

<style>
.speed-buttons {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-around;
}
</style>

注意事项

  1. 平台差异：
    • 微信小程序：全版本支持。
    • H5：需浏览器支持，主流浏览器通常兼容。
    • App：Android/iOS 均支持，但实际效果依赖系统播放器。
  2. 动态修改：直接修改 playbackRate 数据即可生效，无需其他操作。
  3. 初始速度：默认值为 1.0（正常速度）。

扩展建议

  • 可结合 uni.showActionSheet 实现下拉选择菜单。
  • 监听播放事件确保倍速设置及时生效。

通过以上代码即可快速实现视频倍速播放功能。

回到顶部