如何使用
Danmmu Player須要依賴jQuery，所以首先須要加入相關css和js文件。php
<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中須要放置播放器的位置加入以下代碼：css
<div id="danmup"></div>
最後，關鍵的部分，配置參數，調用插件。html
$("#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格式的數據，其中：java
text——彈幕文本內容mysql
color——彈幕顏色。jquery
position——彈幕位置 0爲滾動 1 爲頂部 2爲底部git
size——彈幕文字大小。 0爲小字 1爲大字github
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/