DPlayer.js视频播放插件手机端跳转指定时间失效
文章 285 0 0 0
发布时间:2021年04月05日

概述

在使用vue开发h5移动端网页的时候我们在页面中嵌入了一个视频播放器DPlayer.js来实现手机端的播放在使用seek跳转指定时间点的时候发现这个方法失效。

dplayer使用

初始化播发器

const dplayer = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'video/001.mp4',    //视频路径
        pic: 'images/banner1.png', //视频封面
        thumbnails: 'images/banner2.png', //视频缩略图
        type: 'auto'
    },
});

跳转指定时间

dplayer.seek('6.972618'); //跳转到指定时间位置

在使用dplayer的seek来实现我们跳转到视频的指定时间段的时候发现手机上一直是从0开始,

猜想

可能是由于dplayer实例化以后没有获取到dplayer实例或者是没有拿到视频加载完的信息就执行了seek,而后我发现页面先加载seek进度条已经设置成指定时间,但还是出现了重新渲染的情况导致时间段从0开始播放,所以我们要在视频加载完成以后在设置seek,并分别使用了官方提供的事件监听,发现都没有出现我们想要的情况。

解决

添加定时器

var videotime = null;
videotime = setInterval(function(){
    if (dplayer) {
        dplayer.seek('6.972618'); //跳转到指定时间位置
        clearInterval(videotime);
        videotime = null;
    }
})

最后我们总结出:
当有了视频实例化我们才能去赋值进行一系列的操作,而上述情况就是异步的问题产生的,谨记。

评论专区