uniapp 视频倍速播放

 

 

<view class="content">
        <view class="video-wrap">
            <video id="myVideo" :src="src" @error="videoErrorCallback" :danmu-list="danmuList" show-fullscreen-btn
                danmu-btn object-fit="fill" controls></video>
            <view class="txt-wrap">
                <text class="title">倍速选择：</text>
                <text 
                    v-for="(item,index) in speedList" :key="index"
                    :class="{'active':speedIndex==index?true:false}"
                    @click="speedHandle(index)"
                >
                    {{item}}
                </text>
            </view>
        </view>
    </view>    

export default {
        data() {
            return {
                src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
                speedList: [],
                speedIndex:2,
            }
        },
        onReady(res) {
            // #ifndef MP-ALIPAY
            this.videoContext = uni.createVideoContext('myVideo');
            // #endif
        },
        created() {
            this.speedList = [0.5, 0.8, 1.0, 1.25, 1.5];
        },
        methods: {
            videoErrorCallback: function(e) {
                uni.showModal({
                    content: e.target.errMsg,
                    showCancel: false
                })
            },
            speedHandle(index){
                this.speedIndex =index;
                this.videoContext.playbackRate(Number(this.speedList[index]));
            },
        }
    }

    video {
        width: 100% !important;
    }
    .txt-wrap{
        display:flex;
        justify-content: space-around;
        align-items: center;
        color:#999;
        .title{
            color:#333;
        }
        .active{
            color:#007AFF;
        }
    }