resp播放器 h5 dplayer h5播放器

最近在项目开发中需要在Web页面中嵌入视频播放器，并且通过监听一些事件来记录访问者对于视频的一些操作，在此记录使用方法，方便查询使用 (查看演示 http://www.aikannet.com)

 

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

 

7、支持弹幕

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku，实时视频（HTTP Live Streaming，M3U8格式）以及 FLV 格式。 


用法
HTML
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>

选项
var dp = new DPlayer({
    element: document.getElementById('player1'),                       // 可选，player元素
    autoplay: false,                                                   // 可选，自动播放视频，不支持移动浏览器
    theme: '#FADFA3',                                                  // 可选，主题颜色，默认: #b7daff
    loop: true,                                                        // 可选，循环播放音乐，默认：true
    lang: 'zh',                                                        // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator 
                                                                          language
    screenshot: true,                                                  // 可选，启用截图功能，默认值：false，注意：如果设置为
                                                                          true，视频和视频截图必须启用跨域
    hotkey: true,                                                      // 可选，绑定热键，包括左右键和空格，默认值：true
    preload: 'auto',                                                   // 可选，预加载的方式可以是'none''metadata''auto'，默认
                                                                          值：'auto'
    video: {                                                           // 必需，视频信息
        url: '若能绽放光芒.mp4',                                         // 必填，视频网址
        pic: '若能绽放光芒.png'                                          // 可选，视频截图
    },
    danmaku: {                                                         // 可选，显示弹幕，忽略此选项以隐藏弹幕
        id: '9E2E3368B56CDBB4',                                        // 必需，弹幕 id，注意：它必须是唯一的，不能在你的新播放器
                                                                          中使用这些： `https://api.prprpr.me/dplayer/list`
        api: 'https://api.prprpr.me/dplayer/',                             // 必需，弹幕 api
        token: 'tokendemo',                                            // 可选，api 的弹幕令牌
        maximum: 1000,                                                 // 可选，最大数量的弹幕
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142']   // 可选的，额外的弹幕，参见：`Bilibili弹幕支持`
    }
});

事件绑定
dp.on（event, handler）事件：

play: DPlayer 开始播放时触发 
pause: DPlayer 暂停时触发 
canplay: 在有足够的数据可以播放时触发 
playing: DPlayer 播放时定期触发 
ended: DPlayer 结束时触发 error: 发生错误时触发

HLS支持（实时视频，M3U8格式）
它需要 hls.js 库，并且应该在 DPlayer.min.js 之前加载。实时弹幕尚不支持。

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script>

<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>

FLV支持
它需要 flv.js 库，并且应该在 DPlayer.min.js 之前加载。

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/flv.min.js"></script>
<script src="dist/DPlayer.min.js"></script>

<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.flv'
// ...
}
});
</script>

使用bundler模块
var DPlayer = require('DPlayer'); 
var dp = new DPlayer(option);