uni-app 视频api seek方法线上链接跳转帧无问题 本地视频跳转帧不准

uni-app 视频api seek方法线上链接跳转帧无问题 本地视频跳转帧不准

开发环境 版本号 项目创建方式
Windows Windows10 专业版 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Windows

HBuilderX类型:正式

HBuilderX版本号:3.1.3

手机系统:Android

手机系统版本号:Android 10

手机厂商:联想

手机机型:小新pad

页面类型:nvue

打包方式:云端

项目创建方式:HBuilderX

示例代码:

<div>  
    <video id='video1' class="video" :src="video.src" autoplay="false" duration="" controls="true" :danmu-list="list"  
     danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90" show-mute-btn="true"  
     @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail" @waiting="waiting" @timeupdate="timeupdate"  
     @fullscreenchange="fullscreenchange"></video>  
    <button class="btn" @click="seek">跳转到指定位置</button>  
</div>  
export default {  
    data: {  
        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@20181126-lite.m4v",  
        fil: true,  
        list: [{  
            text: '要显示的文本',  
            color: '#FF0000',  
            time: 9  
        }],  
        video: {  
            src: ''  
        },  
        videoList: [],  
        videoTxt: ''  
    },  
    onReady() {  
        this.context = uni.createVideoContext("video1", this);  
        this.localFile()  
    },  
    methods: {  
        localFile() {  
            plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, (fs) => {  
                var directoryReader = fs.root.createReader();  
                directoryReader.readEntries((entries) => {  
                    if (entries.length == 0) resolve()  
                    for (let i = 0; i < entries.length; i++) {  
                        //获取路径  
                        entries[i].file((file) => {  
                            this.videoInfo(file)  
                        });  
                    }  
                })  
            }, function(e) {  
                console.log("Read entries failed: " + e.message);  
            });  
        },  
        videoInfo(file) {  
            console.log(file)  
            plus.io.getVideoInfo({  
                filePath: "file://" + file.fullPath,  
                success: (videoInfo) => {  
                    //本地支持mp4 flv  
                    this.videoList.push({  
                        srcList: "file://" + file.fullPath,  
                        title: file.name,  
                        gDuration: videoInfo.duration, //大概总时长  
                    })  
                    console.log(this.videoList)  
                    this.video.src = this.videoList[0].srcList  
                },  
                fail: () => {  

                },  
                complete: () => {  

                }  
            })  
        },  
        onstart(e) {  
            console.log("onstart:" + JSON.stringify(e));  
        },  
        onpause(e) {  
            console.log("onpause:" + JSON.stringify(e));  
        },  
        onfinish(e) {  
            console.log("onfinish:" + JSON.stringify(e));  
        },  
        onfail(e) {  
            console.log("onfail:" + JSON.stringify(e));  
        },  
        fullscreenchange(e) {  
            console.log("fullscreenchange:" + JSON.stringify(e));  
        },  
        waiting(e) {  
            console.log("waiting:" + JSON.stringify(e));  
        },  
        timeupdate(e) {  
            // console.log("timeupdate:" + JSON.stringify(e));  
        },  

        play() {  
            this.context.play();  
        },  
        pause() {  
            this.context.pause();  
        },  
        seek() {  
            this.context.seek(20);  
        },  
        stop() {  
            this.context.stop();  
        },  
        fullScreen() {  
            this.context.requestFullScreen({  
                direction: 90  
            });  
        },  
        exitFullScreen() {  
            this.context.exitFullScreen();  
        },  
        sendDanmu() {  
            this.context.sendDanmu({  
                text: '要显示的弹幕文本',  
                color: '#FF0000'  
            });  
        },  
        playbackRate() {  
            this.context.playbackRate(2);  
        }  
    }  
}
.video {  
    width: 750rpx;  
    /* #ifdef H5 */  
    width: 100%;  
    /* #endif */  
    height: 400rpx;  
    background-color: #808080;  
}  

.btn {  
    margin-top: 5px;  
    margin-bottom: 5px;  
}  

操作步骤:

直接复制代码运行就行。本地视频需要在本地文件夹放一个视频。如果是线上,把 :src="video.src" 改成 :src="src"

预期结果:

能够在指定的时间位置播放

实际结果:

不能够在指定的时间位置播放


更多关于uni-app 视频api seek方法线上链接跳转帧无问题 本地视频跳转帧不准的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了吗?我也是这个问题

更多关于uni-app 视频api seek方法线上链接跳转帧无问题 本地视频跳转帧不准的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的描述和代码分析,这是一个关于uni-app视频组件seek方法在本地视频和线上视频表现不一致的问题。以下是关键点分析:

  1. 问题现象:
  • 线上视频链接seek(20)能准确跳转到20秒位置
  • 本地视频seek(20)跳转位置不准确
  1. 可能原因:
  • 本地视频编码格式可能影响seek精度,特别是非标准编码的视频
  • 本地视频文件可能缺少关键帧索引,导致seek时无法精确定位
  • 不同视频容器格式(如MP4/FLV)对seek的支持度不同
  1. 建议检查:
  • 确认本地视频的编码格式是否为H.264标准编码
  • 尝试使用不同编码工具重新编码本地视频
  • 检查视频文件是否完整,没有损坏
  1. 临时解决方案: 可以尝试在seek前先暂停视频,seek后再播放:
seek() {
    this.context.pause();
    this.context.seek(20);
    setTimeout(() => {
        this.context.play();
    }, 300);
}
回到顶部