视频播放器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();
})