基於HTML5有彈幕功能的播放器

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

　　基於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:4},

　　{ "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()就可以輸出資料了。