基于HTML5有彈幕功能的視頻播放器是哪個

小編給大家分享一下基于HTML5有彈幕功能的視頻播放器是哪個，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

如何使用

Danmmu Player需要依賴jQuery，因此首先需要加入相關(guān)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中需要放置播放器的位置加入如下代碼：

<p id="danmup"></p>

最后，關(guān)鍵的部分，配置參數(shù)，調(diào)用插件。

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

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

$("#danmup .danmu-p").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方法是將彈幕內(nèi)容追加到屏幕中，看清楚了，這是一串json格式的數(shù)據(jù)，其中：

text——彈幕文本內(nèi)容

color——彈幕顏色。

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

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

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

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

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

與后端交互

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

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

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

數(shù)據(jù)表danmu的字段結(jié)構(gòu)以及連接數(shù)據(jù)庫文件connect.php請大家下載源碼包可以查看。

sendData.php用來接收前端post過來的彈幕內(nèi)容數(shù)據(jù)，并將數(shù)據(jù)保存到數(shù)據(jù)表中。

include_once('connect.php'); //連接數(shù)據(jù)庫 $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上來的數(shù)據(jù)進行拆分，將數(shù)據(jù)表多設幾個字段用來保存不同的屬性，如內(nèi)容、顏色、字體大小等，然后在getData.php讀取的時候就比較靈活了，直接json_encode()就可以輸出數(shù)據(jù)了。

以上是“基于HTML5有彈幕功能的視頻播放器是哪個”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！