文档章节

基于HTML5的有弹幕功能的视频播放器

ForingY
 ForingY
发布于 2016/06/26 10:33
字数 959
阅读 366
收藏 16

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上的项目地址:输入链接说明

本文转载自:

共有 人打赏支持
ForingY
粉丝 23
博文 272
码字总数 156129
作品 0
杭州
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
网页音频播放器和视频播放器插件收藏

为了能够使网页展示内容更丰富,音频播放器和视频播放器是必不可少的,这里推荐几款。 10个基于Web的HTML5音乐播放器 15个最好的HTML5视频播放器 介绍当前流行的一些开源flash视频播放器 五个...

小微
2012/04/06
0
0
HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川
2013/01/14
0
1
弹幕播放器--ABPlayerHTML5

ABPlayerHTML5是一个在HTML5下的弹幕播放器(同步显示视频于评论)实现。类似功能的播放器可以参考基于Flash的MukioPlayer和PADPlayer。 ABPlayerHTML5使用CommentCoreLibrary作为弹幕核心,...

约翰阿布尼
2014/01/07
7.5K
0
sewise HTML5开源播放器的皮肤

sewise HTML5播放器是一款专业的免费开源的HTML5网页视频、流播放器,兼容Flash播放,它功能强大,体积小,跨平台,使用方便简洁、随心所欲。 sewise HTML5开源播放器皮肤可以自由定义,皮肤...

sewise
2014/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7 个致命的 Linux 命令

导读 如果你是一个 Linux 新手,在好奇心的驱使下,可能会去尝试从各个渠道获得的命令。以下是 7 个致命的 Linux 命令,轻则使你的数据造成丢失,重则使你的系统造成瘫痪,所以,你应当竭力避...

问题终结者
今天
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
今天
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
今天
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
今天
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部