Html5彈幕視頻播放器插件

Danmmu Player是一個具備彈幕功能的Html5視頻播放器。我們在觀看視頻的時候，可以對視頻發表自己的觀點，當點擊發送按鈕后，發表的內容會在視頻屏幕上以彩彈的形式發出，並做滾動展示動畫效果，即視頻彈幕功能。

查看演示下載源碼

如何使用

Danmmu Player需要依賴jQuery，因此首先需要加入相關css和js文件。

<link rel="stylesheet" href="css/main.css"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery.danmu.js"></script> <script src="js/main.js"></script>

接下來，在body中需要放置播放器的位置加入如下代碼：

<div id="danmup"></div>

最后，關鍵的部分，配置參數，調用插件。

$("#danmup").DanmuPlayer({ src: "abc.mp4", //視頻源 height: "480px", //區域的高度 width: "800px", //區域的寬度 urlToGetDanmu:"getData.php", //從后端獲取彈幕數據 urlToPostDanmu:"sendData.php" //發送彈幕數據給后端保存入庫 });

好了，現在可以運行你的彈幕播放器了，當然，如果不用與后端交互，則可以不使用urlToGetDanmu和urlToPostDanmu兩個參數，直接在頁面中加入初始數據，如：

$("#danmup .danmu-div").danmu("addDanmu",[
    { "text":"這是滾動彈幕" ,color:"white",size:1,position:0,time:2},
    { "text":"我是帽子綠" ,color:"green",size:1,position:0,time:3},
    { "text":"哈哈哈啊哈" ,color:"#f30",size:1,position:0,time:10},
    { "text":"大家好，我是打不死的小強" ,color:"orange",size:1,position:0,time:23}
]);

Danmmu Player的addDanmu方法是將彈幕內容追加到屏幕中，看清楚了，這是一串json格式的數據，其中：

text——彈幕文本內容

color——彈幕顏色。

position——彈幕位置 0為滾動 1 為頂部 2為底部

size——彈幕文字大小。 0為小字 1為大字

time——彈幕所出現的時間。單位為分秒（十分之一秒）

isnew——當出現該屬性時（屬性值可為任意），會認為這是用戶新發的彈幕，從而彈幕在顯示的時候會有邊框。

在實例中，我簡化了操作界面，去掉了文本顏色、大小、位置等參數的設置，以及透明度等設置，只留下幾個主要功能按鈕。

與后端交互

實際項目應用時，我們會將前端操作與后端對接，將發送的彈幕內容不僅要顯示在屏幕上，還要存儲到后台數據庫中。當然數據庫類型可以根據項目需求確定。你可以使用MySQL，甚至也可以使用文本文件來保存數據。本文實例中后端采用PHP+MySQL來實現彈幕內容的讀取和保存。

getData.php是用來從后端獲取彈幕數據的。我們知道，在用戶打開播放視頻的時候，已經有人發表過彈幕內容了，這些內容是已經存在數據庫中的了，我們需要將這些數據讀取並顯示在視頻播放器屏幕上。

include_once('connect.php'); //連接數據庫 $json = '['; $query = mysql_query("select * from danmu"); while($row=mysql_fetch_array($query)){ $json .= $row['content'].','; } $json = substr($json,0,-1); $json .= ']'; echo $json;

數據表danmu的字段結構以及連接數據庫文件connect.php請大家下載源碼包可以查看。

sendData.php用來接收前端post過來的彈幕內容數據，並將數據保存到數據表中。

include_once('connect.php'); //連接數據庫 $danmu=strip_tags($_POST['danmu']); $addtime = time(); $sql="INSERT INTO `danmu`(`id`,`content`,`addtime`) VALUES (null,'$danmu','$addtime')"; $query=mysql_query($sql); mysql_close();

其實你也可以將post上來的數據進行拆分，將數據表多設幾個字段用來保存不同的屬性，如內容、顏色、字體大小等，然后在getData.php讀取的時候就比較靈活了，直接json_encode()就可以輸出數據了。

更多相關信息請參照Danmmu Player在github上的項目地址：https://github.com/chiruom/DanmuPlayer/