DPlayer使用笔记
DPlayer是一个非常好用的播放器,支持HLS、FLV等播放方式。还支持弹幕,清晰度切换,是一款常用的播放神器。
准备工作
若使用Flash播放器,请先导入flv.js
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>
若使用H5播放器,请先导入hls.js。
<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/8.0.0-beta.3/hls.js"></script>
至少保证引用一种播放器之后,再导入DPlayer.js
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.25.1/DPlayer.min.js"></script>
基本使用
/**
* 加载直播播放器
* @param {Object} URL
*/
function LoadPlayer(URL) {
const dp = new DPlayer({
container: document.getElementById('player-con-h5'),
live: true, //是否直播
//hotkey: true, //热键开启
screenshot: true, //截图开启
autoplay: true, //自动播放开启
mutex: true, // 多个视频互斥
volume: 0.7, // 音量
playbackSpeed:[0.5, 1, 1.5, 2],
video: {
url: URL,
}
});
}
以上我们就创建了一个简单的方法,只需要代入视频播放地址就可以愉快的播放视频了。以下我以直播为例,如需点播,仅需要把live属性改为false即可。
播放器切换(HLS/FLV)
DPlayer修改版,支持播放器切换的DPlayer.min.js下载
先上效果图,原本想做成和切换清晰度的按钮效果一样的。由于源码的css样式太难写了,就只做成了按钮,点击切换。
新增一个切换播放器按钮
先把DPlayer.js进行美化并且格式化,我们就得到了一份格式化好的DPlayerJS源码,接下来找到在源码里搜索class标签为dplayer-icons dplayer-icons-right,找到负责加载工具条右侧的代码。
然后我们加入这行代码。
<div class="dplayer-quality"><button class="dplayer-icon dplayer-type-icon" id="playerType-button" onClick="PlayerTypeChange()">切换为', t += l(i.playerType), t += '播放器</button></div>
playerType是自定义属性,是负责提示切换的播放器是什么的属性。例如H5、Flash。
给对应的按钮添加CSS样式
此处的样式是“抄袭”的切换清晰度按钮的样式。
切换清晰度按钮class为dplayer-quality-icon
切换播放模式按钮class为dplayer-type-icon
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-type-icon{color:#fff;width:auto;line-height:22px;font-size:14px}
此时你会发现我们添加的按钮不起作用,是因为没有对应的css样式。复制下面的css到DPlayer加载css的地方。我们这次搜索关键字:
{color:#fff;width:auto;line-height:22px;font-size:14px}
可以找到切换清晰度样式的css代码,然后将dplayer-type-icon的css代码追加到这行样式的后面,注意不是行末尾,是该样式的后面。
绑定切换事件
当你到这一步的时候就已经基本完成DPlayer源码的修改了。在前面添加按钮的时候,我提前绑定了PlayerTypeChange事件,接下来可以按照自己的需求写内容了。
此处的playerType是js全局变量,用于赋值DPlayer的自定义属性,这样就可以完成提示信息的切换。
function PlayerTypeChange(){
if(playerType == "HLS"){
console.log("播放器变更FLV");
playerType = "FLV";
$("#playerType-button").html("切换H5播放器");
}else if(playerType == "FLV"){
console.log("播放器变更HLS");
playerType = "HLS";
$("#playerType-button").html("切换FLV播放器");
}
clock(); //获取对应的HLS地址,或者获取FLV地址
}
手机端点击播放后不自动隐藏工具条
我们可以监听DPlayer的playing事件来做到,可以配合setTimeout延迟隐藏工具条,提升用户体验。
dp.on('playing', function () {
//间隔两秒则自动隐藏
setTimeout(function(){
//为播放器添加隐藏工具条样式
document.getElementById("player-con-h5").classList.add("dplayer-hide-controller");
}, 2000);
});