欢迎光临十大正规赌博平台!

十大正规赌博平台个人网站-十大正规赌博平台个人博客-杨照佳

正规博彩十大公司

关注世界十大博彩公司的博客网站

首页 > WEB开发 > JavaScript >

基于HTML5的有弹幕成果的视频播放器

发布时间:2016-12-02  编辑:正规博彩十大公司   点击:   

Danmmu Player是一个具备弹幕成果的Html5视频播放器。我们在寓目视频的时辰,可以对视频颁发本身的概念,当点击发送按钮后,颁发的内容会在视频屏幕上以彩弹的情势发出,并做转动展示动画结果,即视频弹幕成果。

基于HTML5的有弹幕成果的视频播放器

怎样行使

Danmmu Player必要依靠jQuery,因此起首必要插手相干Css和js文件。

<link rel="stylesheet" href="/web/javascript/Css/main.Css">
<script src="http://itbyc.com/js/jquery-2.1.4.min.js"></script>
<script src="http://itbyc.com/js/jquery.danmu.js"></script>
<script src="http://itbyc.com/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/

本文地址:/web/javascript/14279.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1