1***@qq.com
1***@qq.com
  • 发布:2024-06-17 16:30
  • 更新:2024-06-17 16:59
  • 阅读:24

video 如何滑动指定位置播放。app端

分类:uni-app
    <video :show-fullscreen-btn="false" :show-play-btn="false" src="https://media.w3.org/2010/05/sintel/trailer.mp4"  
            :poster="videoActive.PicPath" autoplay="true" :controls="false" nitial-time="0" page-gesture="true"  
            @timeupdate="timeUpdate" @loadedmetadata="loadedMetadata" :duration="start">  
            <cover-view style="position: absolute;bottom: 128rpx;right: 60rpx;color: #fff;cursor: pointer;"  
                @click="changeShowWidth">  
                <image src="/static/study/window.jpg" mode=""></image>  
            </cover-view>  
        </video>  
        <view class="log">  
            <view class="jindu" v-show="timeNow">  
                <view class="miao">  
                    {{timeNow}}  
                </view>  
                <slider class="jindus" :value="sliderValue" :max="end" @change="onSliderChange"  
                    @changing="onSliderChanging" backgroundColor="#686763" block-size="10">  
                </slider>  
                <view class="sudu" @click.stop="changeNum">  
                    倍速 <text>x{{num}}</text>  
                </view>  

            </view>  
        </view>

上面是html

这里是js

let videoContext = uni.createVideoContext('myVideo')  
    const showWidht = ref(false)  
    const changeShowWidth = () => {  
        if (showWidht.value) {  
            showWidht.value = false  
            videoContext.requestFullScreen()  
        } else {  
            showWidht.value = true  
            videoContext.exitFullScreen()  
        }  
    }  
    //倍速  
    const doubleSpeed = () => {  
        //这里的'myVideo'要和上方video标签的id相对应  
        videoContext.requestFullScreen() //全屏  
        return  
        // videoContext.pause() //暂停  
        videoContext.pause({  
            direction: 90  
        }) //全屏  
        // videoContext.exitFullScreen() //半屏幕  
        // videoContext.playbackRate(0.5) //倍速0.5/0.8/1.0/1.25/1.5  
    }  
    const sliderValue = ref(0);  
    const start = ref(0)  
    const end = ref(0)  
    const timeNow = ref('')  

    // 时间格式化函数  
    const formatTime = (seconds) => {  
        const minutes = Math.floor(seconds / 60);  
        const secs = Math.floor(seconds % 60);  
        return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;  
    };  

    // 播放时间更新  
    const timeUpdate = (e) => {  
        if (change.value) {  
            return  
        }  
        start.value = e.detail.currentTime;  
        end.value = e.detail.duration;  
        timeNow.value = `${formatTime(start.value)}/${formatTime(end.value)}`;  
        sliderValue.value = start.value;  
    };  

    // 元数据加载完成  
    const loadedMetadata = (e) => {  
        end.value = e.target.duration;  
    };  

    const change = ref(false)  
    // 进度条变化时  
    const onSliderChanging = (value) => {  
        start.value = value.detail.value  
        videoContext.seek(value.detail.value)  
        change.value = true  
        timeNow.value = `${formatTime(start.value)}/${formatTime(end.value)}`;  
    };  

    // 进度条变化完成时  
    const onSliderChange = (value) => {  
        change.value = false  
        videoContext.seek(value.detail.value)  
        timeNow.value = `${formatTime(value.detail.value)}/${formatTime(end.value)}`;  
    };  
    //修改倍速  
    const changeNum = () => {  
        num.value == 1 ? num.value = 1.25 : num.value == 1.25 ? num.value = 1.5 : num.value == 1.5 ? num.value = 1 : 1  
        videoContext.playbackRate(num.value) //倍速0.5/0.8/1.0/1.25/1.5  
    }
2024-06-17 16:30 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - 河南信阳光山

比如拖拽进度条到10。那么我调用的方法是videoContext.seek(value.detail.value) 感觉是方法的问题吧

1***@qq.com

1***@qq.com (作者) - 河南信阳光山

已解决 谢谢 获取id的时候 不小心代码删掉了

要回复问题请先登录注册