如何使用

Danmmu Player需要依赖jQuery,因此首先需要加入相关css和js文件。

接下来,在body中需要放置播放器的位置加入如下代码:

最后,关键的部分,配置参数,调用插件。

$("#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()就可以输出数据了。

html网页播放器fl,Html5弹幕视频播放器插件相关推荐

  1. web player html5源码,GitHub - WEBHH/DanmuPlayer: Html5弹幕视频播放器插件

    DanmuPlayer ##Html5弹幕视频播放器插件 Danmmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕,实时调解弹幕显示效果等功能. D ...

  2. html5播放器插件手机版,Html5弹幕视频播放器插件

    插件描述:Danmmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕,实时调解弹幕显示效果等功能. Danmmu Player意在使开发者能便捷的在网 ...

  3. Html5弹幕视频播放器插件Danmu介绍

    原文地址:http://www.jq22.com/jquery-info2611 插件描述:Danmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕, ...

  4. 米云影视html5播放器,网页制作HTML5自定义视频播放器源码

    video对象 兼容性写法 您的浏览器不支持,请升级您的浏览器 video 标签 width height autoplay muted poster带有预览图(海报图片)的视频播放器 选中video ...

  5. HTML5 自定义视频播放器

    HTML5 自定义视频播放器 第一步:获取播放器 第二步:实现播放与暂停 第三步:实现全屏操作 第四步:实现播放的逻辑 第五步:实现播放过程的逻辑 第六步:实现视频的跳播 第七步:播放完毕后重置播放器 ...

  6. WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]

    Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...

  7. linux自带视频播放VLC,如何将VLC媒体播放器设置为默认视频播放器?

    问题描述 我似乎无法将VLC媒体播放器设置为默认视频播放器.我已进入系统设置→系统信息→默认应用程序,并将"Video"更改为VLC媒体播放器. 但是,默认情况下,所有电影仍然使用 ...

  8. Android原生视频播放器下载,视频播放器:VideoPlayer下载_视频播放器:VideoPlayer官方下载【手机安卓版】-华军软件园...

    视频播放器:Video Player是最简单.高效的手机视频文件播放器.VideoPlayer可以支持大部分格式的视频及音频多媒体文件,如光盘,设备和网络流媒体.我们确保你的多媒体文件在原分辨率下播放 ...

  9. AVPlayer自定制视频播放器(1)——视频播放器基本实现

    在iOS多媒体开发的过程中,经常会用到视频播放器,简单是视频播放器,直接使用苹果封装好的MPMoviePlayerController和MPMoviePlayerViewController就可以实现 ...

最新文章

  1. iptables详解--转
  2. jmeter+mysql+set_Jmeter中如何进行对数据库压测(上)
  3. 推荐一个采用方便程序员在线动画学习常用算法的良心网站
  4. c#sql防注入模糊查询_SQL中利用LIKE实现模糊查询的功能
  5. 你女朋友在买买买时,程序员小哥在干嘛?
  6. .NET简谈事务、分布式事务处理
  7. python不同时间周期k线_请问期货不同时间级别的k线呈现相反形态怎么判断买卖点?...
  8. 获取Access数据库字段的所有属性(转)
  9. cad插件苹果系统_CAD看图软件mac版|CAD迷你看图 for Mac下载 v4.0.0 官方版_最火软件站...
  10. CenterOs git安装
  11. [一本通]题解 1031
  12. matlab右下方箭头,matlab绘制箭头arrow
  13. 标准差(Standard Deviation)和标准误差(Standard Error)
  14. Oracle等待事件之buffer busy waits
  15. python openpyxl怎么将数组写入excel_Python-使用openpyxl模块写入Excel文件
  16. 设置U盘盘符为自定义图片
  17. 微服务架构与开源框架
  18. BugKu CTF(杂项篇MISC)---细心的大象
  19. 自动驾驶汽车的百年风云
  20. 汕头大学计算机专业荣誉,广西考生进入汕头大学要超一本线三四十分,但我想学的计算机专业在全国排名很低,真不知汕大的这专业有啥...

热门文章

  1. SDU程序设计思维Week7-作业 C-TT的美梦
  2. 【搜索排序】召回综述Semantic Models for the First-Stage Retrieval: A Comprehensive Review
  3. Mac操作系统入手--新手教学
  4. [Unity动画]给人物模型添加简单的动画
  5. 双击打开word很慢,当其他方式打开word则正常
  6. 【论文精读】Leveraging Line-point Consistence to Preserve Structures for Wide Parallax Image Stitching
  7. Java 微信支付APP V3示例思路
  8. mybatis中where标签和trim标签的区别以及使用
  9. idea自动导包 自动删除
  10. OpenCV imread读取图片为空的问题