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

Danmmu Player是一个具备弹幕功能的Html5视频播放器。我们在观看视频的时候,可以对视频发表自己的观点,当点击发送按钮后,发表的内容会在视频屏幕上以彩弹的形式发出,并做滚动展示动画效果,即视频弹幕功能。
基于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()就可以输出数据了。

时间: 2024-09-15 20:41:11

基于HTML5的有弹幕功能的视频播放器例子的相关文章

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photoboo

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机11585.html">硬件设备. 在今天的这篇文章中,我们将介绍来自Wolfram Hempel开发的Photobooth.js,使用这个

7款很棒的 HTML5 视频播放器

为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频.在这篇文章中,我收集了7个很棒的HTML5视频播放器,你可以很容易的应用到你的网站中,文章最后还将与大家分享使用 CSS3 和 jQuery 开发一个自定义 HTML5 视频播放器的教程. VideoJS VideoJS 是最流行的 HTML5 视频播放器,免费.开源,可使用 CSS 轻松定制皮肤,支持全屏,在不支持的浏览器自动切换为 Flash 播

分享10款最棒的免费HTML5视频播放器

最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题. HTML5可以在没有flash的情况下播放视频.现在有很多的漂亮HTML5视频播放界面,包括控制元素,所以你不需要其它的东西来播放视频.这里我们 给大家介绍10款最好的免费HTML5播放器,希望大家能喜欢,支持我们,请给我们留言! The Free HTML5 Video Player 一个免费的开源的使用javascript开发的HTML5播放器.解

android中集中html5,怎样实现文件下载功能,我现在有一个超链接

问题描述 android中集中html5,怎样实现文件下载功能,我现在有一个超链接 <a href="http://xxxxxxx/group1/M00/00/08/Ci09DVSb9n6AH76IAAX4AIw6xuk01.docx?attname=基于ANT的增量代码检查.docx&attachid=942'" download="基于ANT的增量代码检查.docx" class="graybtn">下载</a>

iPhone5和iOS6上HTML5开发的新增功能

开发移动应用到底是选择Native.Web应用或者混合应用?答案是不同的移动应用需要不同的技术,选择合适的就行.其实大多数移动应用,不管是企业移动应用还是互联网移动应用,90%都可以使用基于HTML5的Web技术就足够.在Android 4.0和iOS 6以上浏览器已经是最快的应用了,比任何本地的微博.微信都快,无须更新升级,无须上传分裂的APP市场,无须突然被苹果下架应用.再看看最近发布 Firefox OS 开发手机的配置也大概知道,运行大多数应用不需要那么高配置. 目前主流的智能终端中,i

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

基于HTML5的CSS框架组件BootFlat

BootFlat 是一款基于 Bootstrap 的 Flat UI 组件,跟原生的Bootstrap框架相比,BootFlat提供了更多的页面组件,同时增加了页面布局功能.与Flat UI相比更为突出的是BootFlat可以帮助你更快速的利用HTML5实现Web App开发. BootFlat的特点 BootFlat是基于bootstrap3.2.0,便于快速的开发web和mobile app的UI框架 Bootflat组件基于HTML5和CSS3设计,提供sass文件和多种色值,便于开发者修

c++播放器-qt基于mplayer的多路视频播放器

问题描述 qt基于mplayer的多路视频播放器 主要功能是同步播放最多四路视频,也可以放大某一通道进行单路回放,如果单纯只为了播放就没有问题,但是在多路回放的时候我要实时显示播放进度以及进度条的跟进和进度条拉动进行视频的跳转不好实现,如果是单一通道播放就没问题,求大神指教,其他只要是基于c++的开发工具都可以,求条明路,如果可以的话,大神加我qq941290482或者留下您的QQ!

【视频处理工程】7、一个基于LavFilter的对话框视频播放器

在实现了利用控制台程序播放指定视频文件之后,接下来开始尝试编写一个带有界面的视频播放器,可以选择播放的视频,控制音量等更多的功能.为简单起见,界面的框架用MFC实现. 1.建立工程,生成默认界面 这一步很简单,打开Visual Studio 2010,选择MFC Application,选择基于对话框的工程然后一路next就完成了,没有任何需要更改的地方.之后可以编译运行,生成一个默认的对话框.对工程进行与DirectShow相关的设置,具体方法参考这里. 2.添加播放器内核类 将上文中的Dir