码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-06-26 12:41:58      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:element   ons   type   hot   adf   default   efault   video   ide   

背景

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

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

标签:element   ons   type   hot   adf   default   efault   video   ide   

原文地址:http://www.cnblogs.com/zhang134you/p/7079839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!