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