DPlayer使用笔记

DPlayer使用笔记

DPlayer是一个非常好用的播放器，支持HLS、FLV等播放方式。还支持弹幕，清晰度切换，是一款常用的播放神器。

准备工作

若使用Flash播放器，请先导入flv.js

flv.min.js下载地址

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>

若使用H5播放器，请先导入hls.js。

hls.min.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>

DPlayer中文文档地址

基本使用

         /**
		 * 加载直播播放器
		 * @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);
			});