uni-app video组件倍速效果不生效

Question

video组件可以调用pause和play方法，但是playbackRate配置了（0.5 0.75 1.25 1.5）都不生效.

<template>  
    <view style="margin-top: 250rpx;">  
        <video id="videoRef" ref="videoRef"  
            src="http://192.168.4.1/media/Front/2025-02-19/2025-02-19-10-16-11/F_2025-02-19-10-16-12.mp4"  
            style="width: 100%;"  @play="onplay">  
        </video>  

        <button @click="stop" style="margin-bottom: 20rpx;">stop</button>  
        <button @click="speed" style="margin-bottom: 20rpx;">speed</button>  
        <button @click="play" style="margin-bottom: 20rpx;">play</button>  
    </view>  

</template>  

<script>  
    export default {  
        data() {  
            return {  
                videoContext: null,  
            };  
        },  
        onReady() {  
            this.videoContext = uni.createVideoContext('videoRef', this);  
        },  

        mounted() {  

        },  

        methods: {  
            onplay() {},  

            stop() {  

                this.videoContext.pause();  
            },  
            speed() {  
                this.videoContext.playbackRate(1.5);  
            },  

            play() {  
                this.videoContext.play()  
            }  
        }  
    };  
</script>  

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

uni-app video 组件倍速效果不生效

你遇到的问题是 uni-app 中 video 组件的倍速效果不生效，虽然你已经配置了 playbackRate 属性，但是它并没有生效。

根据 uni-app 的文档，playbackRate 属性只能在 iOS 和 Android 上生效，而在其他平台上可能不生效。

如果你想要在 uni-app 中实现视频倍速播放，可以尝试使用 video 组件的 currentTime 和 duration 属性来实现倍速播放。

例如：

<template>
  <video :src="videoSrc" @timeupdate="handleTimeUpdate"></video>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '',
      playbackRate: 1
    }
  },
  methods: {
    handleTimeUpdate(event) {
      const currentTime = event.target.currentTime
      const duration = event.target.duration
      const newTime = currentTime * this.playbackRate
      event.target.currentTime = newTime
    }
  }
}
</script>

在上面的代码中，我们使用 timeupdate 事件来监听视频的当前时间和总时间，然后根据 playbackRate 属性来计算新的当前时间，并将其设置到视频中。

需要注意的是，这种方法可能会导致视频的播放不流畅，或者出现其他问题。

如果你需要在 uni-app 中实现更加复杂的视频播放功能，可以考虑使用第三方库或插件，例如 video.js 等。