Dplayer Html5 弹幕视频播放器的实现

本弹幕视频，通过  Html5  Dplayer实现。

Dplayer官网：http://dplayer.js.org/#/

Dplayer文档：http://dplayer.js.org/#/zh-Hans/

Dplayer GitHub：https://github.com/MoePlayer/DPlayer

先看效果图

 

 

 一、下载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样式，可以参考改一下，让视频精简一点。

<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>

        播放器很强大，还有很多其他的功能，可以看看官方文档。蛋疼的一点就是他这官网太不稳定了-。-。。。

        其实我还实现了视频记忆的功能，从数据库中读取播放时间，下次观看直接指定时间播放，类似网课智慧树，超星，之类的。。。今天就先到这吧，有什么不懂的地方，可以问我。

Dplayer官网：http://dplayer.js.org/#/

Dplayer文档：http://dplayer.js.org/#/zh-Hans/

Dplayer GitHub：https://github.com/MoePlayer/DPlayer