更新时间:2019-09-18 08:53:30
更新说明:修改作者地址失效问题。
本插件实现弹幕功能,就如某些视频网站上的弹幕功能一样,只不过国内大多数视频网站是用flash实现的,而本插件通过jQuery。 就如绝大多数视频网站的弹幕功能,私也实现了彩色弹幕,顶端弹幕及底端弹幕,也可以即时操控弹幕透明度。当然也可以在弹幕运行的过程中暂停和继续。
用法
不用多说,第一步要引入js文件,把jquery.danmu.js和jQuery一起引用。
1 2 | < script src = "danmu/jquery-1.11.1.min.js" ></ script > < script src = "danmu/jquery.danmu.js" ></ script > |
插件中定义了弹幕对象,意指具体某一条弹幕及起信息,对象名字叫”danmu”,该对象有如下属性:
text――弹幕文本内容。
color――弹幕颜色。 position――弹幕位置 “0”为滚动 “1” 为顶部 “2”为底部
size――弹幕文字大小。 “0”为小字 ”1”为大字
time――弹幕所出现的时间。 单位为”分秒“(及1/10秒,100毫秒)
isnew――当出现该属性时(属性值科委任意),会认为这是用户新发的弹幕,从而弹幕在显示的时候会有边框。 例如:
1 | var a_danmu={ "text" : "2333333" , "color" : "green" , "size" : "1" , "position" : "0" , "time" :60}; |
要显示边框的新弹幕:
1 | var a_danmu={ "text" : "2333333" , "color" : "green" , "size" : "1" , "position" : "0" , "time" :60 , "isnew" : " " }; |
另外,为提高效率,插件另外定义了一种名为danmuss的对象,意指所有弹幕的集合,这个对象在每个弹幕屏中是唯一的。插件在运行时会把每个danmu对象写入danmuss对象,然后在相应的时间把某条弹幕放映于屏幕。dammuss对象每个属性的名称为弹幕所出现的时间点(分秒),属性值为该时间点所出现的所有弹幕的danmu对象(没有time属性)所组成的数组。
例如:
1 | 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" }, ] }; |
要在屏幕中插入弹幕,首先需要划定一个区域,使用<div>。
例如现在创建一个id=”danmu”的div作为弹幕将要飞过的区域 <div id="danmu"> </div>
然后调用插件方法,传递配置属性。
("#danmu").danmu({
left: 0, //区域的左边边界位置,相对于父div
top: 0 , //区域的上边边界位置,相对于父div
height: 360, //区域的高度 width: 640, //区域的宽度
zindex :100, //div的css样式zindex
speed:5000, //弹幕速度,飞过区域的毫秒数
sumtime:900 , //弹幕运行总时间
danmuss:{}, //danmuss对象,运行时的弹幕内容
default_font_color:"#FFFFFF", //弹幕默认字体颜色
font_size_small:24, //小号弹幕的字体大小,注意此属性值只能是整数
font_size_big:28, //大号弹幕的字体大小
opacity:"0.7", //弹幕默认透明度
top_botton_danmu_time:4000 //顶端底端弹幕持续时间 } );
所有属性都不是必须指定,默认值就如上。
当不指定danmuss时,也可以在调用此方法后用
1 | $( '#danmu' ).danmu( "add_danmu" ,新弹幕的danmu类型对象) |
;逐一添加danmu对象。
当然在弹幕运行的过程中,可以随时用
1 | $( '#danmu' ).danmu( "add_danmu" ,新弹幕的danmu类型对象) |
添加弹幕。
做完以上准备后,可以使弹幕在该区域开始运行,调用
1 | $( '#danmu' ).danmu( 'danmu_start' ); |
即可运行。
其他方法:
暂停弹幕:
1 | $( '#danmu' ).danmu( 'danmu_pause' ); |
暂停后继续:
1 | $( '#danmu' ).danmu( 'danmu_resume' ); |
停止弹幕:
1 | $( '#danmu' ).danmu( 'danmu_stop' ); |
即时增加弹幕:
1 | $( '#danmu' ).danmu( "add_danmu" ,新弹幕的danmu类型对象); |
使弹幕时间同步与视频的时间,可能需要和时间相关的方法,如下。
获取弹幕运行的当前时间(单位为分秒):
1 | $( '#danmu' ).data( "nowtime" ); |
设置弹幕运行的当前时间(单位为分秒):
1 | $( '#danmu' ).data( "nowtime" ,新时间) |
更改弹幕透明度:
1 | $( #danmu).data("opacity",新透明度数值); |
是否处于暂停状态:
1 | $( '#danmu' ).data( "paused" ); |
如果需要像视频网站那样使用户所发弹幕得以保存,需要使用到web后端及数据库技术。
Demo
推荐的方法
通过控制好弹幕div的left、top、height、width、zindex属性,可以让弹幕正好悬浮于html视频之上,就如Demo中的那样。
在用户发弹幕时,可以在前端生成两个danmu对象,一个是有isnew属性的,即时使用add_danmu方法添加弹幕。另一个是没有isnew属性的,使用ajax技术写入数据库。
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com