Html5弹幕视频播放器插件

所属分类:媒体-音频和视频

 155383  507  查看评论 (40)
分享到微信朋友圈
X
Html5弹幕视频播放器插件 ie兼容10

DanmuPlayer

这个已经有用户布过了。Danmmu Player是一个具备弹幕功能的Html5视频播放器。 具备弹幕视频播放,接受用户发送彩色弹幕,实时调解弹幕显示效果等功能。 Danmmu Player意在使开发者能便捷的在网站中实现弹幕视频播放。

开始使用

1.第一步引入本播放器的js和css文件,需要和jQuery一起引用。<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<div id="danmup"></div>
3.初始化DanmuPlayer,利用刚才新建的div.$("#danmup").danmuplayer({
  src:"shsn.mp4",       //视频源
  width:800,            //视频宽度
  height:445            //视频高度
});好了,已经可以在页面上看到播放器。试着发下弹幕,也OK。
等等,现在用户发的弹幕貌似没有写入数据库,也就是说是一次性的,刷新页面后就没了?是这样的,但是接下来就告诉你可以怎么做。

进阶使用

4.在上一步中,我们用调用某jQuery对象的方法初始化了一个弹幕播放器,并传递了一些参数(src,width,height)。其实这个方法具有以下参数 (除了视频源外其余参数均可选,冒号后面的为默认值)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对象意指具体某一条弹幕及起信息,它有如下属性: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对象,如果暂时不理解可以绕过,很少用到)
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项目)。可以直接复制以下代码语句去即时的操作弹幕:

暂停弹幕:$('#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标签。

许可

你可以随意使用本项目,只需要在您的项目中添加这么一行注释:DanmuPlayer (//github.com/chiruom/danmuplayer/) - Licensed under the MIT license
相关插件-音频和视频

jQuery仿微信公众号语音框插件weixinAudio.js

jQuery仿微信公众号的语音播放功能weixinAudio.js
  音频和视频
 36923  371

1:1模仿虾米音乐播放器,歌词与播放进度同步

能够很好地对歌词进行同步,1:1模仿虾米音乐播放器,希望有兴趣的朋友能够相互支持。
  音频和视频
 43113  443

个性暗音乐播放精简优化版

基于@星云发布的个性暗音乐播放精简优化版
  音频和视频
 17621  251

canvas视频录制(原创)

mediarecoder录制媒体流 canvas绘制动画 导出录像视频
  音频和视频
 10942  124

讨论这个项目(40)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    铭记... 0
    2021/4/28 10:30:05
    怎么控制弹幕滑的速度 回复
    CC_以沫 0
    2018/6/20 10:04:15
    有关闭弹幕功能吗 回复
    zxl_33 0
    2017/11/15 10:45:45

    post方法对应的后台方法的返回有什么格式要求吗?

    回复
    赤色鸳鸯肚兜 0
    2017/7/13 16:49:55

    弹幕的透明度仅对滚动弹幕有效,低端或顶端弹幕不受控制

    回复
    Now、or never 0
    2017/5/14 17:24:46

    现在就只有谷歌播放不了了

    回复
    Now、or never 0
    2017/5/14 16:54:44

    为什么我的在edge浏览器上可以播放,但是样式错了,在火狐和谷歌都不能播放?

    回复
    Lai 0
    2017/5/5 10:38:52

    这个怎么改成实时的 用AJAX进行对此获取

    回复
    掌柜の 0
    2017/4/29 22:52:01

    声音控件在那里绑定啊?调不了音量吖

    回复
    Miss云泽 0
    2017/4/11 21:50:01

    你们都动态连接到数据库了吗?我怎么一直post不进去,做好的方便联系一下我吗?qq:522054727,有偿

    回复
    yisiran520 0
    2017/4/9 13:25:50

    请问,弹幕为什么没有插入

    <script type="text/javascript">
        var danmuss1 = {
            10: [{
                    "text": "hahahaha",
                    "color": "red",
                    "size": "0",
                    "position": "0"
                },
                {
                    "text": "233333",
                    "color": "red",
                    "size": "0",
                    "position": "2"
                }
            ],
    
            30: [{
                    "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"
            }, ],
        };
    
        $("#danmup").danmuplayer({
            src: "0.mp4", //视频源
            height: 450, //播放器的高度
            width: '100%', //播放器的宽度,最小宽度支持为720
            speed: 20000, //弹幕速度,穿过视频的毫秒数 
            danmuss: danmuss1, //默认的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
        });
    </script>
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复