|
一、下载Dplayer相关文件
就是Dplayer GitHub下载。。。
二、前台页面
html页面中引用下载完的Dplayer中的css和js
<link rel="stylesheet" href="__PUBLIC__/assets/css/DPlayer.min.css">
<script src="__PUBLIC__/assets/js/DPlayer.min.js"></script>
这个是我自己的css样式，可以参考改一下，让视频精简一点。
html页面中引用下载完的Dplayer中的css和js
<style>
.basicinfo {
margin: 15px 0;
}
.basicinfo .row > .col-xs-4 {
padding-right: 0;
}
.basicinfo .row > div {
margin: 5px 0;
}
.Dplayer_box{overflow:hidden;width:100%;height:100%;margin-bottom: 3%}
#player1{background-size:100% 100%;}
.player_av{width:100%;height:100%;float:left;background:#000}
.Dplayer_danmu{width:299px;float:right;height:100%}
.Dplayer_watching{width:100%;height:60px;line-height:60px;display:inline-block;font-size:12px;color:#99a2aa;box-shadow:#ddd 0 0 5px}
.Dplayer-watching-number{margin-left:20px;font-size:18px;font-weight:700;color:#222;padding:0}
.Dplayer_list{width:100%;height:30px;overflow:hidden}
.Dplayer_list li{width:60px;height:30px;float:left;color:#99a2aa;font-size:12px;text-align:center;line-height:30px}
.Dplayer_list li:nth-child(1){width:58px!important}
.Dplayer_list li:nth-child(2){width:136px!important}
.list_ovefiow{width:100%;height:363px;overflow:auto}
.danmuku_list{width:100%;height:20px;line-height:20px;text-align:left;color:#99a2aa;font-size:12px;display:block;margin:auto;overflow:auto;margin-top:5px}
.danmuku_list li{float:left;width:60px;height:20px;white-space:nowrap;cursor:pointer}
.danmuku_list li:nth-child(1){width:58px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.danmuku_list li:nth-child(2){width:125px;margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.danmuku_list li:nth-child(2):hover{color:#00a1d6}.danmuku_list li:nth-child(3){margin-left:5px}
label{
display: inline;
}
</style>
Html代码：
<div class="Dplayer_box">
<div class="player_av">
<div id="player1"></div>
</div>
</div>
没错，就这么少
三、Dplayer初始化
<script>
var url = "__CDN__{$fullurl}"; //视频路径
var urlId = "{$fullurl|md5}22"; //弹幕库ID，我用url当作ID，同时md5加密，避免和其它弹幕库ID重复
//创建DPlayer对象
var dp = new DPlayer({
element: document.getElementById('player1'),
video: {
url: url //视频的路径
},
danmaku: { //弹幕功能，不需要可以删除
id: urlId, //弹幕库的ID，每个视频的弹幕库不能一样，可以把url作为id
api: 'https://api.prprpr.me/dplayer/' //这个是官网写好的弹幕接口，可以直接使用，就是不太稳定
}
});
</script>
这就是Dplayer的初始化过程，用的是官网提供的api接口，可以直接实现弹幕功能，但是是大家公用的一个api接口。。。
所以，大家也可以自己搭建弹幕接口，详情参照官网的文档，我比较懒，就没有自己搭建-。-(其实是windows搭建还需要下载一些东西，嫌麻烦QAQ)。
四、全部代码
<style>
.basicinfo {
margin: 15px 0;
}
.basicinfo .row > .col-xs-4 {
padding-right: 0;
}
.basicinfo .row > div {
margin: 5px 0;
}
.Dplayer_box{overflow:hidden;width:100%;height:100%;margin-bottom: 3%}
#player1{background-size:100% 100%;}
.player_av{width:100%;height:100%;float:left;background:#000}
.Dplayer_danmu{width:299px;float:right;height:100%}
.Dplayer_watching{width:100%;height:60px;line-height:60px;display:inline-block;font-size:12px;color:#99a2aa;box-shadow:#ddd 0 0 5px}
.Dplayer-watching-number{margin-left:20px;font-size:18px;font-weight:700;color:#222;padding:0}
.Dplayer_list{width:100%;height:30px;overflow:hidden}
.Dplayer_list li{width:60px;height:30px;float:left;color:#99a2aa;font-size:12px;text-align:center;line-height:30px}
.Dplayer_list li:nth-child(1){width:58px!important}
.Dplayer_list li:nth-child(2){width:136px!important}
.list_ovefiow{width:100%;height:363px;overflow:auto}
.danmuku_list{width:100%;height:20px;line-height:20px;text-align:left;color:#99a2aa;font-size:12px;display:block;margin:auto;overflow:auto;margin-top:5px}
.danmuku_list li{float:left;width:60px;height:20px;white-space:nowrap;cursor:pointer}
.danmuku_list li:nth-child(1){width:58px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.danmuku_list li:nth-child(2){width:125px;margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.danmuku_list li:nth-child(2):hover{color:#00a1d6}.danmuku_list li:nth-child(3){margin-left:5px}
label{
display: inline;
}
</style>
<link rel="stylesheet" href="__PUBLIC__/assets/css/DPlayer.min.css">
<div class="Dplayer_box">
<div class="player_av">
<div id="player1"></div>
</div>
</div>
<script src="__PUBLIC__/assets/js/DPlayer.min.js"></script>
<script>
var url = "__CDN__{$fullurl}"; //视频路径
var urlId = "{$fullurl|md5}22"; //弹幕库ID，我用url当作ID，同时md5加密，避免和其它弹幕库ID重复
//创建DPlayer对象
var dp = new DPlayer({
element: document.getElementById('player1'),
video: {
url: url //视频的路径
},
danmaku: { //弹幕功能，不需要可以删除
id: urlId, //弹幕库的ID，每个视频的弹幕库不能一样，可以把url作为id
api: 'https://api.prprpr.me/dplayer/' //这个是官网写好的弹幕接口，可以直接使用，就是不太稳定
}
});
</script>
播放器很强大，还有很多其他的功能，可以看看官方文档。蛋疼的一点就是他这官网太不稳定了-。-。。。
其实我还实现了视频记忆的功能，从数据库中读取播放时间，下次观看直接指定时间播放，类似网课智慧树，超星，之类的。。。
| 
