視頻播放器DPlayer使用方法介紹

最近在項目開發中需要在Web頁面中嵌入視頻播放器，並且通過監聽一些事件來記錄訪問者對於視頻的一些操作，在此記錄使用方法，方便查詢使用：

  1、在頁面中加載庫文件

<link rel="stylesheet" href="./assets/lib/dplayer/dist/DPlayer.min.css"/>   //視頻播放器對應樣式文件
<script src="../assets/lib/dplayer/dist/DPlayer.min.js"></script>

2、創建HTML
<div id="dplayer"></div>

3、初始化視頻var dplayer = new DPlayer({

    element: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: false,
    screenshot: true, //截屏
    hotkey: false,
    logo: '/public/assets/images/server/favicon.ico',
    video: {  //視頻源 包含不同分辨率源
        quality: [{
            name: '普清',
            url: url1
        },{
            name: '高清',
            url: url2
        }, {
            name: '超清',
            url: url3
        }],
        defaultQuality: 0,
        pic: '',
        type: 'auto'
    }
});

4、事件：
　　play,  播放時觸發
　　pause,  暫停時觸發
　　canplay, 
　　playing, 播放時觸發
　　ended, 視頻播放結束時觸發
　　error  出錯時觸發

5、事件監聽：
（1）通過on方法綁定事件
　　dplayer.on(event, callback)
   EG： dplayer.on('play',funcition(){
　　　　console.log("start play video");
　　})
(2)通過dplayer.video.current對象設置
ondurationchange　　onerror　　onload　　onloadeddata

　　onloadedmetadata　　onloadstart　　onmousedown　　onmouseenter　　onmouseleave

　　onmousemove　　onmouseout　　onmouseover　　onmouseup　　onmousewheel

　　onpause　　onplay　　onplaying　　onpointercancel　　onpointerdown　　onpointerenter

　　onpointerleave　　onpointermove　　onpointerout　　onpointerover　　onpointerup

　　onprogress　　onratechange　　onreset　　onresize　　onseeked　　onseeking

　　ontimeupdate　　onvolumechange　　onwaiting　　onwaitingforkey

　　onwebkitfullscreenchange　　onwebkitfullscreenerror

　　EG: dplayer.video.current.onplay = function(){
　　　　console.log("start play video");
　　}
6、獲取當前視頻播放時間：  dplayer.video.current.currentTime