基於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上的項目地址：輸入連接說明