弹幕播放器【在项目中对弹幕播放器一些零碎的整理】
2017-02-14 00:00
381 查看
摘要: 已经过好一段时间才想起来写这篇博客
\n
Bilibili/DanmakuFlameMaster \n
---
\n
danmuplayer
项目地址: http://www.wtoutiao.com/p/d25bpf.html
项目地址:
https://github.com/Bilibili/DanmakuFlameMaster
DanmakuFlameMaster
android上开源弹幕解析绘制引擎项目。
ijkplayer,提供 Android和 iOS双平台视频播放器的解决方案。
项目地址:https://github.com/Bilibili/ijkplayer
这两个开源项目已被优酷土豆、ACFUN等知名app使用
Features
使用多种方式(View/SurfaceView/TextureView)实现高效绘制
B站xml弹幕格式解析
基础弹幕精确还原绘制
支持mode7特殊弹幕
多核机型优化,高效的预缓存机制
支持多种显示效果选项实时切换
实时弹幕显示支持
换行弹幕支持/运动弹幕支持
支持自定义字体
支持多种弹幕参数设置
支持多种方式的弹幕屏蔽
TODO:
继续精确/稳定绘帧周期
增加OpenGL ES绘制方式
改进缓存策略和效率
http://www.jq22.com/jquery-info2611
等等,现在用户发的弹幕貌似没有写入数据库,也就是说是一次性的,刷新页面后就没了?是这样的,但是接下来就告诉你可以怎么做。[/code]
举例:
要显示边框的新弹幕:
danmuss对象是该弹幕视频中所有danmu对象的集合,它的存在是为了提高程序的效率。
每个DanmuPlayer只有一个duamss对象。DanmuPlayer在运行时会把每个danmu对象写入danmuss对象。
dammuss对象每个属性的名称为弹幕所出现的时间点(分秒),属性值为该时间点所出现的所有弹幕的danmu对象(除掉time属性的)所组成的数组。
例如:
在初始化DanmuPlayer时有个可选的参数danmuss,它的值就应该是一个合法的danmuss对象。有了这个参数,DanmuPlayer会把这个参数值中的dannuss播放于屏幕。(对于danmuss对象,如果暂时不理解可以绕过,很少用到)[/code]
相关项目信息:
http://app.hezhibo.com:8080/Video/index.html
http://app.hezhibo.com:8080/Video/hlsplayer/share2.html
http://192.168.1.127:8080/ShareServer/danmuplayer/share.html
https://github.com/chiruom/DanmuPlayer
http://media.isafe365.cn:8080/play/000200065690101_32010020160523140319753100eum9xj.mp4.m3u8
http://app.isafe365.cn:8000/ShareServer/pageServer?version=1.0&data=aHR0cDovL21lZGlhLmlzYWZlMzY1LmNuOjgwODAvcGxheS8wMDAyMDAwNjU2OTAxMDFfMzIwMTAwMjAxNjA1MjMxNDAzMTk3NTMxMDBldW05eGoubXA0Lm0zdTg=
http://media.isafe365.cn:8080/download/000200065690101_32010020160523140319753100eum9xj.mp4
http://112.4.28.209:8000/live/1000.m3u8
https://bce.baidu.com/product/lss.html
out.println("{\"img\":\"http://i1.hdslb.com/bfs/archive/7e1e76c24f94a53bea3feea09afabd8842ae719d.jpg\",\"cid\":\"http://comment.bilibili.com/7639962.xml\",\"src\":\"http://cn-zjwz5-dx.acgvideo.com/vg6/8/7b/7639962-1.mp4?expires=1464111900&ssig=tp_JaHvlYA4TD0B9LChaJw&oi=1968716518&internal=1&rate=0\"}");
{"img":"http://i1.hdslb.com/bfs/archive/7e1e76c24f94a53bea3feea09afabd8842ae719d.jpg","cid":"http://comment.bilibili.com/7639962.xml","src":"http://cn-zjwz5-dx.acgvideo.com/vg6/8/7b/7639962-1.mp4?expires=1464111900&ssig=tp_JaHvlYA4TD0B9LChaJw&oi=1968716518&internal=1&rate=0"}
http://www.bilibili.com/m/html5?aid=4709464&page=1
http://192.168.1.127:8080/m/html5?aid=4709464&page=1
http://192.168.1.127:8080/BPC/a.html
192.168.1.241:8760/BPC/sharePageUrl?sharePageUrl=aHR0cDovLzExMi40LjI4LjIwOTo4MC92b2QvbWVkaWEyMS8yMDE1MTAyOTE3MzIwMzgyMF8xODcyay5tcDQubTN1OD90aW1lc3RhbXA9MjAxNjA2MjIxNTQzMDkmZW5jcnlwdD1hZWZjMzVhMzFiZmQ2NmZmNWViYTY2NDAzMmQyYTg0MCZzdF9zb3VyY2VpZD1uaXA5cGRpYWR0dXQxdmRzYnltaGdzc3RocG92ZngxZg==
http://192.168.1.241:8760/BPC/sharePageUrlDm?sharePageUrl=aHR0cDovLzExMi40LjI4LjIwOTo4MC92b2QvbWVkaWEyMS8yMDE1MTAyOTE3MzIwMzgyMF8xODcyay5tcDQubTN1OD90aW1lc3RhbXA9MjAxNjA2MjIxNTQzMDkmZW5jcnlwdD1hZWZjMzVhMzFiZmQ2NmZmNWViYTY2NDAzMmQyYTg0MCZzdF9zb3VyY2VpZD1uaXA5cGRpYWR0dXQxdmRzYnltaGdzc3RocG92ZngxZg==
\n
Bilibili/DanmakuFlameMaster \n
---
\n
danmuplayer
项目地址: http://www.wtoutiao.com/p/d25bpf.html
项目地址:
https://github.com/Bilibili/DanmakuFlameMaster
DanmakuFlameMaster
android上开源弹幕解析绘制引擎项目。
ijkplayer,提供 Android和 iOS双平台视频播放器的解决方案。
项目地址:https://github.com/Bilibili/ijkplayer
这两个开源项目已被优酷土豆、ACFUN等知名app使用
Features
使用多种方式(View/SurfaceView/TextureView)实现高效绘制
B站xml弹幕格式解析
基础弹幕精确还原绘制
支持mode7特殊弹幕
多核机型优化,高效的预缓存机制
支持多种显示效果选项实时切换
实时弹幕显示支持
换行弹幕支持/运动弹幕支持
支持自定义字体
支持多种弹幕参数设置
支持多种方式的弹幕屏蔽
TODO:
继续精确/稳定绘帧周期
增加OpenGL ES绘制方式
改进缓存策略和效率
http://www.jq22.com/jquery-info2611
DanmuPlayer
这个已经有用户布过了。Danmmu Player是一个具备弹幕功能的Html5视频播放器。 具备弹幕视频播放,接受用户发送彩色弹幕,实时调解弹幕显示效果等功能。 Danmmu Player意在使开发者能便捷的在网站中实现弹幕视频播放。开始使用
1.第一步引入本播放器的js和css文件,需要和jQuery一起引用。 [code=plain]<link rel="stylesheet" href="assets/DanmuPlayer/css/danmuplayer.css"> <script src="assets/js/jquery-1.11.1.min.js"></script> <script src="assets/DanmuPlayer/js/danmuplayer.js"></script>
2.新建一个div,这里把id值设为danmp [code=plain]<div id="danmup"></div>
3.初始化DanmuPlayer,利用刚才新建的div. [code=plain]$("#danmup").danmuplayer({ src:"shsn.mp4", //视频源 width:800, //视频宽度 height:445 //视频高度 });好了,已经可以在页面上看到播放器。试着发下弹幕,也OK。
等等,现在用户发的弹幕貌似没有写入数据库,也就是说是一次性的,刷新页面后就没了?是这样的,但是接下来就告诉你可以怎么做。[/code]
进阶使用
4.在上一步中,我们用调用某jQuery对象的方法初始化了一个弹幕播放器,并传递了一些参数(src,width,height)。其实这个方法具有以下参数 (除了视频源外其余参数均可选,冒号后面的为默认值) [code=plain] src: "shsn.mp4", //视频源 height: 450, //播放器的高度 width: 800, //播放器的宽度,最小宽度支持为720 speed: 20000, //弹幕速度,穿过视频的毫秒数 danmuss: {}, //默认的danmuss对象(稍后介绍) default_font_color: "#FFFFFF", //默认的弹幕颜色 font_size_small: 16, ////小号弹幕的字体大小,注意此属性值只能是整数 font_size_big:28, //大号弹幕的字体大小 opacity: "1", //默认弹幕的透明度 top_botton_danmu_time: 6000, //底部及顶部弹幕存留的世界 url_to_get_danmu: "", //用来接收弹幕信息的url (稍后介绍) url_to_post_danmu: "" //用来存储弹幕信息的url (稍后介绍)
5.在这一节中,向米娜桑介绍DanmuPlayer中的两种js对象,danmu对象及danmuss对象。 danmu对象意指具体某一条弹幕及起信息,它有如下属性: [code=plain]text——弹幕文本内容。 color——弹幕颜色。 position——弹幕位置 “0”为滚动 “1” 为顶部 “2”为底部 size——弹幕文字大小。 “0”为小字 ”1”为大字 time——弹幕所出现的时间。 单位为”分秒“(及1/10秒,100毫秒) isnew——当出现该属性时(属性值科委任意),会认为这是用户新发的弹幕,从而弹幕在显示的时候会有边框。
举例:
var a_danmu={ "text":"2333333" , "color":"green" ,"size":"1","position":"0","time":60};
要显示边框的新弹幕:
var a_danmu={ "text":"2333333" , "color":"green" ,"size":"1","position":"0","time":60 ,"isnew":" "};
danmuss对象是该弹幕视频中所有danmu对象的集合,它的存在是为了提高程序的效率。
每个DanmuPlayer只有一个duamss对象。DanmuPlayer在运行时会把每个danmu对象写入danmuss对象。
dammuss对象每个属性的名称为弹幕所出现的时间点(分秒),属性值为该时间点所出现的所有弹幕的danmu对象(除掉time属性的)所组成的数组。
例如:
var danmuss={ 1:[ { "text":"hahahaha" , "color":"red" ,"size":"0","position":"0"}, { "text":"233333" , "color":"red" ,"size":"0","position":"2"} ], 3:[ { "text":"poi" , "color":"red" ,"size":"1","position":"1"}, { "text":"2333" , "color":"#FFFFFF" ,"size":"0","position":"0"} ], 50:[ { "text":"XXX真好" , "color":"#FFFFFF" ,"size":"0","position":"2"}, ] };
在初始化DanmuPlayer时有个可选的参数danmuss,它的值就应该是一个合法的danmuss对象。有了这个参数,DanmuPlayer会把这个参数值中的dannuss播放于屏幕。(对于danmuss对象,如果暂时不理解可以绕过,很少用到)[/code]
6.在这一节中,告诉米娜桑如何和后端连接将弹幕存储于数据库。DanmuPlayer提供了高度封装的和后端ajax交互的接口,你只需按照接口修改出一个或两个后端页面即可。 在初始化DanmuPlayer时,两个参数url_to_get_danmu和url_to_post_danmu就是用来和后端连接的。url_to_get_danmu用来获取弹幕,url_to_post_danmu用来存储弹幕。url_to_get_danmu和url_to_post_danmu接受的参数都是url。 DanmuPlayer在页面载入时,会向url_to_get_danmu所对应的页面发送Get请求,url_to_get_danmu对应页面的http响应报文的内容中应该是一个由danmu对象组成的js数组(字符串形式)。"['{danmmu对象1}','{danmu对象2}',...,'{danmu对象n}']"这样的字符串(遵循JSON格式标准)(在报文中是没有最外面的引号的)(注意:每个danmu对象都要被引号所包裹,否则会产生致命错误)。 当用户发弹幕时,DanmuPlayer向url_to_post_danmu发送post请求,报文的内容是用户所发弹幕的danmu对象(字符串)(遵循JSON格式标准)。 在demo&doc目录中有一个简单的php版的url_to_get_danmu和url_to_post_danmu所对应页面的编写示例:
7.DanmuPlayer中有一个id为danmu的标签(这句话可以不用理,详情请参照jQuery.danmu.js项目)。可以直接复制以下代码语句去即时的操作弹幕: 暂停弹幕:[code=plain]$('#danmu').danmu('danmu_pause');暂停后继续:
$('#danmu').danmu('danmu_resume');停止弹幕:
$('#danmu').danmu('danmu_stop');即时增加弹幕:
$('#danmu').danmu("add_danmu",新弹幕的danmu类型对象);获取弹幕运行的当前时间(单位为分秒):
$('#danmu').data("nowtime");设置弹幕运行的当前时间(单位为分秒):
$('#danmu').data("nowtime",新时间)更改弹幕透明度:
$(#danmu).data("opacity",新透明度数值);是否处于暂停状态:
$('#danmu').data("paused");
其他方法
8.由于DanmuPlayer基于video.js编写,故几乎所有的video.js接口都可用于DanmuPlayer。 video.js项目及文档地址:https://github.com/videojs/video.js/ DanmuPlayer在内部定义了一个名字叫做danmu_video的全局videojs对象,可以对danmu_video使用video.js的任何方法及相应事件处理等。
9.注意:由于DanmuPlayer内部组件命名的规范性,它几乎可以与其他任何前端插件共存。但是,一个页面上只允许存在一个DanmuPlayer。此缺陷在后续版本或许会改进。如果你需要在一个页面中使用多个DanmuPlayer,可以使用frame标签。
许可
你可以随意使用本项目,只需要在您的项目中添加这么一行注释: [code=plain]DanmuPlayer (//github.com/chiruom/danmuplayer/) - Licensed under the MIT license
相关项目信息:
http://app.hezhibo.com:8080/Video/index.html
http://app.hezhibo.com:8080/Video/hlsplayer/share2.html
http://192.168.1.127:8080/ShareServer/danmuplayer/share.html
https://github.com/chiruom/DanmuPlayer
http://media.isafe365.cn:8080/play/000200065690101_32010020160523140319753100eum9xj.mp4.m3u8
http://app.isafe365.cn:8000/ShareServer/pageServer?version=1.0&data=aHR0cDovL21lZGlhLmlzYWZlMzY1LmNuOjgwODAvcGxheS8wMDAyMDAwNjU2OTAxMDFfMzIwMTAwMjAxNjA1MjMxNDAzMTk3NTMxMDBldW05eGoubXA0Lm0zdTg=
http://media.isafe365.cn:8080/download/000200065690101_32010020160523140319753100eum9xj.mp4
http://112.4.28.209:8000/live/1000.m3u8
https://bce.baidu.com/product/lss.html
out.println("{\"img\":\"http://i1.hdslb.com/bfs/archive/7e1e76c24f94a53bea3feea09afabd8842ae719d.jpg\",\"cid\":\"http://comment.bilibili.com/7639962.xml\",\"src\":\"http://cn-zjwz5-dx.acgvideo.com/vg6/8/7b/7639962-1.mp4?expires=1464111900&ssig=tp_JaHvlYA4TD0B9LChaJw&oi=1968716518&internal=1&rate=0\"}");
{"img":"http://i1.hdslb.com/bfs/archive/7e1e76c24f94a53bea3feea09afabd8842ae719d.jpg","cid":"http://comment.bilibili.com/7639962.xml","src":"http://cn-zjwz5-dx.acgvideo.com/vg6/8/7b/7639962-1.mp4?expires=1464111900&ssig=tp_JaHvlYA4TD0B9LChaJw&oi=1968716518&internal=1&rate=0"}
http://www.bilibili.com/m/html5?aid=4709464&page=1
http://192.168.1.127:8080/m/html5?aid=4709464&page=1
http://192.168.1.127:8080/BPC/a.html
192.168.1.241:8760/BPC/sharePageUrl?sharePageUrl=aHR0cDovLzExMi40LjI4LjIwOTo4MC92b2QvbWVkaWEyMS8yMDE1MTAyOTE3MzIwMzgyMF8xODcyay5tcDQubTN1OD90aW1lc3RhbXA9MjAxNjA2MjIxNTQzMDkmZW5jcnlwdD1hZWZjMzVhMzFiZmQ2NmZmNWViYTY2NDAzMmQyYTg0MCZzdF9zb3VyY2VpZD1uaXA5cGRpYWR0dXQxdmRzYnltaGdzc3RocG92ZngxZg==
http://192.168.1.241:8760/BPC/sharePageUrlDm?sharePageUrl=aHR0cDovLzExMi40LjI4LjIwOTo4MC92b2QvbWVkaWEyMS8yMDE1MTAyOTE3MzIwMzgyMF8xODcyay5tcDQubTN1OD90aW1lc3RhbXA9MjAxNjA2MjIxNTQzMDkmZW5jcnlwdD1hZWZjMzVhMzFiZmQ2NmZmNWViYTY2NDAzMmQyYTg0MCZzdF9zb3VyY2VpZD1uaXA5cGRpYWR0dXQxdmRzYnltaGdzc3RocG92ZngxZg==
相关文章推荐
- 一些Flex开源项目的整理
- 一些Flex开源项目的整理
- 一些实用的 Java / C++ 开源项目整理
- 一些开源项目整理
- 个人整理的一些net 开源项目
- 【整理】国内一些大公司的开源项目
- 一些零碎的整理
- 我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。
- 自己做项目时整理的一些用于过滤的正则表达式
- iOS中一些零碎的整理
- 一些Flex开源项目的整理
- 一些Flex开源项目的整理
- 一些Flex开源项目的整理
- go语言,一些零碎没时间整理
- 一些Flex开源项目的整理
- 一些Flex开源项目的整理
- 一些Flex开源项目的整理
- 关于基础架构的一些零碎问题的整理记录
- 整理一些最近项目中用到的一些JS方法
- java Web项目中常用的一些工具整理