uniapp video播放如何开启倍速功能

在uniapp中使用video组件播放视频时，如何开启倍速播放功能？目前官方文档没有明确说明这个功能的具体实现方式，尝试设置playbackRate属性没有效果。请问有没有成功实现过的朋友可以分享一下具体方法？需要兼容iOS和Android平台。

2 回复

在uniapp中，video组件默认支持倍速播放。在video标签中添加playbackRate属性即可设置播放速度，例如：

<video playback-rate="2.0"></video>

支持0.5、1.0、1.25、1.5、2.0等倍速值。


在 UniApp 中，开启视频倍速功能可以通过 <video> 组件的 playbackRate 属性实现。以下是详细步骤和示例代码：

实现方法

  1. 设置 playbackRate 属性：通过绑定变量控制播放速度（例如 1.0 为正常速度，2.0 为 2 倍速）。
  2. 动态调整速度：可通过按钮或选择器切换不同倍速值。

示例代码

<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'); // 需指定视频id
        videoContext.playbackRate(this.playbackRate);
      });
    }
  }
};
</script>

注意事项

  • 平台差异：部分平台（如 iOS）可能对倍速范围有限制，需测试目标平台的兼容性。
  • 视频上下文：若动态调整倍速，建议通过 uni.createVideoContext 确保设置生效。
  • 用户交互：倍速切换通常需在用户主动操作（如点击按钮）后触发。

通过以上代码，即可在 UniApp 中实现视频倍速播放功能。

回到顶部