“輕松學PHP”,有學習文檔,框架視頻教程,網站教程,提供百度分享給大家下載,收藏。大家關注后回復關鍵詞,便可獲取!平臺將與大家分享前端到后端的實例,學習語法,學習教程,技巧等!歡迎大家關注!
代碼如下:
php自學與交流中心QQ群:
加微信交流群的請加小編為好友
是一個具備彈幕功能的Html5視頻播放器。我們在觀看視頻的時候,可以對視頻發表自己的觀點html視頻播放器源代碼,當點擊發送按鈕后,發表的內容會在視頻屏幕上以彩彈的形式發出,并做滾動展示動畫效果,即視頻彈幕功能。
如何使用
需要依賴,因此首先需要加入相關css和js文件。
?rel="stylesheet"?href="css/main.css">?
<scriptsrc="js/jquery-2.1.4.min.js"></script>?
<scriptsrc="js/jquery.danmu.js"></script>?
<scriptsrc="js/main.js"></script>?
接下來,在body中需要放置播放器的位置加入如下代碼:
?id="danmup">?
最后,關鍵的部分,配置參數,調用插件。
$("#danmup").DanmuPlayer({?
????src:?"abc.mp4",?//視頻源?
????height:?"480px",?//區域的高度?
????width:?"800px",?//區域的寬度?
????urlToGetDanmu:"getData.php",??//從后端獲取彈幕數據?
????urlToPostDanmu:"sendData.php"??//發送彈幕數據給后端保存入庫?
});?
好了,現在可以運行你的彈幕播放器了,當然,如果不用與后端交互,則可以不使用和兩個參數,直接在頁面中加入初始數據,如:
$("#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}?
]);?
的方法是將彈幕內容追加到屏幕中,看清楚了,這是一串json格式的數據,其中:
text——彈幕文本內容
color——彈幕顏色。
——彈幕位置 0為滾動 1 為頂部 2為底部
size——彈幕文字大小。 0為小字 1為大字
time——彈幕所出現的時間。 單位為分秒(十分之一秒)
isnew——當出現該屬性時(屬性值可為任意),會認為這是用戶新發的彈幕,從而彈幕在顯示的時候會有邊框。
在實例中,我簡化了操作界面,去掉了文本顏色、大小、位置等參數的設置,以及透明度等設置,只留下幾個主要功能按鈕。
與后端交互
實際項目應用時,我們會將前端操作與后端對接,將發送的彈幕內容不僅要顯示在屏幕上,還要存儲到后臺數據庫中。當然數據庫類型可以根據項目需求確定。你可以使用MySQL,甚至也可以使用文本文件來保存數據。本文實例中后端采用PHP+MySQL來實現彈幕內容的讀取和保存。
.php是用來從后端獲取彈幕數據的。我們知道html視頻播放器源代碼,在用戶打開播放視頻的時候,已經有人發表過彈幕內容了,這些內容是已經存在數據庫中的了,我們需要將這些數據讀取并顯示在視頻播放器屏幕上。
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的字段結構以及連接數據庫文件.php請大家下載源碼包可以查看。
.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上來的數據進行拆分,將數據表多設幾個字段用來保存不同的屬性,如內容、顏色、字體大小等,然后在.php讀取的時候就比較靈活了,直接()就可以輸出數據了。
演示地址:
點擊上面微信號關注我
關注我喲
小編隔天推送php教程,php技巧,php視頻教程,MySQL,筆試題等諸多優質內容,最接地氣、重服務的本地微信平臺!關注我們妥妥沒錯!