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

最近在项目开发中需要在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',                                                  // 可选，主题颜色，默认: #b7daffloop: true,                                                        // 可选，循环播放音乐，默认：truelang: 'zh',                                                        // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator languagescreenshot: true,                                                  // 可选，启用截图功能，默认值：false，注意：如果设置为true，视频和视频截图必须启用跨域hotkey: true,                                                      // 可选，绑定热键，包括左右键和空格，默认值：truepreload: '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/',                             // 必需，弹幕 apitoken: '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);

DPlayer视频播放器使用方法介绍相关推荐

vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
DPlayer – H5视频播放器使用方法介绍
DPlayer 是一个支持弹幕的 HTML5 视频播放器.支持 Bilibili 视频和 danmaku,支持HLS,FLV,MPEG DASH,WebTorrent以及其他视频格式,支持截屏.热键. ...
DPlayer视频播放器使用方法
最近在项目开发中需要在Web页面中嵌入视频播放器,并且通过监听一些事件来记录访问者对于视频的一些操作,在此记录使用方法,方便查询使用 1.在页面中加载库文件<link rel="sty ...
Html5弹幕视频播放器插件Danmu介绍
原文地址:http://www.jq22.com/jquery-info2611 插件描述:Danmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕, ...
免费视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/6689179.html Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.j ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
flvplayer.swf、flv视频播放器使用方法
今天由于网页上要加入一个视频文件,就研究了一下flv视频播放器flvplayer.swf 一.直接在html文件中加载: <div id="FlashFile"> ...
一款开源免费跨浏览器的视频播放器--videojs使用介绍
最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...
开源视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/4115377.html 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上 ...

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

DPlayer视频播放器使用方法介绍相关推荐

最新文章

热门文章