视频播放器Dplayer切换片源时绑定事件失效的解决方案

Posted 2020-09-25 燃烧小火苗

背景

在站点中使用视频播放器DPlayer时，可以实现弹幕，片源切换，倍速播放，API提供了很多的事件，不过在切换片源时，原来绑定的监测事件会失效（及不会在切换之前的基础上继续有效）

1)视频播放器初始化

var player = new DPlayer({
    element: document.getElementById(‘video‘),
    autoplay: false,
    theme: ‘#FADFA3‘,
    loop: false,
    screenshot: false, //截屏
    hotkey: false,
    // logo: ‘/public/assets/images/server/favicon.ico‘,
    video: {
        quality: [{
            name: ‘普清‘,
            url: path1
        },{
            name: ‘高清‘,
            url: path2
        }, {
            name: ‘超清‘,
            url: path3
        }],
        defaultQuality: 0,
        pic: ‘‘,
        type: ‘auto‘
    }
});

2)绑定事件

initDplayer:function() {
    //播放事件
    player.video.current.ontimeupdate = function(){
        var current_time = player.video.current.currentTime;
        console.log(‘playing at ‘ + current_time)
    }
    //暂停事件
    player.video.current.onpause = function() {
　　　　var current_time = player.video.current.currentTime;
　　　　console.log("paused at " + current_time);

    }
  　　
    //拖动过程事件
    player.video.current.onseeking = function() {
        console.log("seeking at " + player.video.current.currentTime);
    }
    //拖动结束事件
    player.video.current.onseeked = function() {
        console.log("seek to " + player.video.current.currentTime);
    }
    //变更播放速率事件
    player.video.current.onratechange = function() {
        console.log("ratechange at " + player.video.current.currentTime);
    }
}

解决方案

通过为播放器切换片源按钮绑定点击事件，然后重新绑定事件即可继续有效原先绑定的事件作用

$("body").on(‘click‘,‘.dplayer-quality-item‘,function() {
    initDplayer();
})