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

背景

在站点中使用视频播放器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();})