背景

在站點中使用視頻播放器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切換片源時綁定事件失效的解決方案