如何使用

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

php+js实现弹幕,基于HTML5的有弹幕功能的视频播放器相关推荐

  1. html5带倍速功能的视频播放器(加速2倍,1.5倍播放)

    阿酷TONY  采用第三方云视频平台 HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频, ...

  2. html5实现视频播放器 弹幕效果,基于HTML5的有弹幕功能的视频播放器

    如何使用 Danmmu Player需要依赖jQuery,因此首先需要加入相关css和js文件. 接下来,在body中需要放置播放器的位置加入如下代码: 最后,关键的部分,配置参数,调用插件. $(& ...

  3. 基于HTML5+JavaScript实现的网页录屏器设计

    资源下载地址:https://download.csdn.net/download/sheziqiong/85773105 资源下载地址:https://download.csdn.net/downl ...

  4. 基于51单片机的多功能八路抢答器

    1.功能介绍 多功能八路抢答器是基于51单片机来设计的,除了可以实现最基本功能--8路抢答外,还具有自动处理犯规选手,抢答时间调整,还可以进行答题,计分,并且可以查询或修改分数. 2.硬件设计 该抢答 ...

  5. 【Linux】基于Mplayer开源多媒体库的音视频播放器

    文章目录 1 项目概况 2 项目需求 3 搭建环境 4 技术描述 5 概要设计 6 条件准备和主界面构架 7 点名系统: 8 相册: 9 视频: 10 音乐: 11 项目总结 1 项目概况 本次项目是 ...

  6. 基于STM32单片机实现多功能MP3播放器系统设计

    百度网盘下载地址(942):点击下载 本项目是基于STM32F103来制作一个多功能MP3,除了可以实现MP3播放的基本功能之外,同时拥有丰富并实用的外扩功能,整个系统的功能包括:MP3播放功能.收音 ...

  7. 基于ffmpeg+opengl+opensl es的android视频播放器

    最近做了一个android视频播放器,在jni中采用c/c++现了播放器的播放,暂停,快进等基本的播放器功能. 使用开源库FFMpeg来解码,得到音视频数据,FFMPEG是一个功能强大的音视频解码,编 ...

  8. html5页面弹幕代码,html5新年许愿文字弹幕代码

    特效描述:html5 新年许愿 文字弹幕代码.html5文字弹幕 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 HTML5手机视频弹幕文字评论代码 #audio_btn{ posit ...

  9. html5+php视频播放器,整理5款html5网页播放器,总有一款适合你吧

    整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...

最新文章

  1. SQL-23 对所有员工的当前(to_date='9999-01-01')薪水按照salary进行按照1-N的排名,相同salary并列且按照emp_no升序排列...
  2. 查看linux4222端口,linux 内核 ALIGN 含义
  3. 第20条:为私有方法名加前缀
  4. VTK:可视化之Legend
  5. ExtJS + Gears
  6. 过程声明与同名事件或过程的描述不匹配_多特征结合的倾斜无人机影像匹配方法...
  7. java 泛型 多态_Java 多态
  8. Linux的通信命令
  9. IList,ICollection,IEnumerable,IEnumerator,IQueryable
  10. python安装whl_1 Matplotlib在win10下安装
  11. docker深入2-API示例
  12. 即时聊天:前端react+极光IM
  13. 创建一个简单的Flash动画
  14. CIFAR-10数据集目录结构以及数据组织格式
  15. 妙用AccessibilityService黑科技实现微信自动加好友拉人进群聊
  16. MSXML2.DOMDocument
  17. 《算法图解》学习笔记(五):哈希表,小名散列表(附代码)
  18. ARIMA差分自回归移动平均模型--时间序列预测
  19. ROS学习记录(一) Plugin插件
  20. Centos执行shell命令返回127错误

热门文章

  1. 计算机考证word版本
  2. php __construct 继承,关于继承:PHP:如何将子类__construct()参数传递给parent :: __ construct()?...
  3. 假冒公安骗取钱财会涉及什么罪名
  4. S3C2440-裸机篇-10 | 使用S3C2440操作Nand Flash
  5. 3D打印机耗材ABS和PLA的区别
  6. 在Python代码中调用WPS
  7. 一个医院网站的优化方案 方方面面皆须做好
  8. 《鸟哥的Linux 私房菜 基础学习篇(第三版)》——1.2 Torvalds的Linux开发
  9. easyexcel导出和导入
  10. 怎么重启nginx和关闭服务?