基于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/

聲明： 本文為原創文章，helloweba.com和作者擁有版權，如需轉載，請注明來源于helloweba.com并保留原文連結：http://www.helloweba.com/view-blog-362.html