文档章节

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

ForingY
 ForingY
发布于 2016/06/26 10:33
字数 959
阅读 358
收藏 15
点赞 0
评论 0

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
博文 252
码字总数 156129
作品 0
杭州
程序员
弹幕播放器--ABPlayerHTML5

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

约翰阿布尼 ⋅ 2014/01/07 ⋅ 0

高性能HTML5弹幕播放器--Moe2_player

Moe2player是一款高性能HTML5弹幕播放器。 特点: 完全基于html5,移动设备友好,(iphone需要添加到桌面作为webapp方可观看弹幕) 性能强大,在多倍于B站最大弹幕覆盖量的情况下,仍然可以达...

匿名 ⋅ 2016/03/25 ⋅ 2

WhiteBlue/bilibili-react

bilibili-react ======== An unofficial site for "bilibili" 演示地址 http://mobile.shiroblue.cn API基于个人的另一个项目bilibili-service 功能 提供手机APP的大部分功能,同时兼容手机,...

WhiteBlue ⋅ 2016/01/12 ⋅ 0

FreeTube:注重隐私的开源桌面 YouTube 播放器

你已经知道我们需要 Google 帐户才能订阅频道并从 YouTube 下载视频。如果你不希望 Google 追踪你在 YouTube 上的行为,那么有一个名为 “FreeTube” 的开源 Youtube 播放器。它能让你无需使...

作者: Sk ⋅ 04/25 ⋅ 0

HTML5 SVG 设计开源软件macSVG

macSVG是一款Mac OS平台下的HTML5网页设计及SVG 设计开源软件, 基于WebKit的用户界面, 包括Web检查器,可为桌面和移动平台上的HTML5 以及可缩放矢量图形视图生成动态,高质量图形和动画。 特...

marsdream ⋅ 05/30 ⋅ 0

弹幕核心通用构件--CommentCoreLibrary

弹幕播放核心(CommentCoreLibrary)是一套原始的基于JavaScript构建的弹幕控制器,意在催化HTML5下弹幕播放器的 发展,和为希望了解弹幕播放器弹幕组件运作原理的开发者提供简单但是深入的入...

约翰阿布尼 ⋅ 2014/01/07 ⋅ 0

TypeScript初战Chrome插件:Bilibili弹幕热度

TL;DR 这是一个用来在B站视频进度条上方创建显示弹幕热度的Chrome插件,以弹幕数量-时间的直方图显示,在高能处(定义为短时间内有大量弹幕出现的时间点)有明显的峰值,可以用来直观地看视频...

MegrezZhu ⋅ 06/07 ⋅ 0

PearPlayer.js 2.5.6 发布,流媒体播放器

PearPlayer.js 2.5.6 已发布,更新如下: 对每个下载的分片进行sha1校验,解决因为数据损坏而播放出错的bug 通过测量http head请求的响应时间来对节点进行过滤 解决其它已知bug PearPlayer....

snowinszut ⋅ 04/23 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

Youku HTML5 播放器扩展--Youku-HTML5-Player

Youku HTML5 播放器扩展 —— 告别 flash 和广告 关于官方内测 html5 播放器 安装 Firefox ( xpi 直接安装) ( firefox 50.0+) Chrome ( crx 分流)( xiaoC 友情交易滋糍)(chrome 50.0+) 部分...

匿名 ⋅ 2017/09/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 12分钟前 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部