视频播放器DPlayer使用方法介绍

Posted 2020-09-24 燃烧小火苗

最近在项目开发中需要在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