文章最后更新时间:2024年05月17日
其他语言: English
集成了 CommentCoreLibrary 弹幕库, 更多文档请查看 CommentCoreLibrary文档
在控制条上增加了弹幕关闭和开启按钮, 以及发送弹幕的输入框, 和发送弹幕的按钮
引入阿里云Aliplayer播放器CDN和组件
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.CSS" /> <script charset="utf-8" type="text/JavaScript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script> <script charset="utf-8" type="text/JavaScript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script> <script charset="utf-8" type="text/javascript" src="aliplayercomponents-1.0.9.min.js"></script>
Aliplayer播放器配置中添加如下代码:
var danmukuList = [{ "mode": 1, "text": "test", "stime": 1000, "size": 25, "color": 0xffffff }, { "mode": 1, "text": "test", "stime": 1000, "size": 25, "color": 0xffffff }, { "mode": 1, "text": "test", "stime": 1000, "size": 25, "color": 0xffffff }] var player = new Aliplayer({ id: "player",//容器 source: "https://www.18ma.cn/static/demo.M3U8",//视频地址 width: "100%",//宽度 height: "100%",//高度 autoplay: false,//自动播放 preload: true,//预加载 rePlay: false,//循环播放 cover:"",//视频封面 isLive:false,//直播模式 playsinline: true,//H5是否内置播放,有的Android浏览器不起作用。 controlBarVisibility: 'click',//控制栏显示方式 showBarTime: '5555',//控制栏自动隐藏时间 components: [{ name: 'AliplayerDanmuComponent', type: AliPlayerComponent.AliplayerDanmuComponent, args: [danmukuList] }] });
该组件接收一个参数 danmukuList 数组形式的弹幕列表, 每一个数组元素即一个弹幕对象, 弹幕对象属性参考CommentObject 弹幕对象, 可根据文档添加任意属性来满足自己的需求, 示例如下:
// 弹幕对象的属性均来自, CommentCoreLibrary 的 CommentObject 对象可查看文档 [{ "mode": 1, // mode 表示弹幕的类型,参考 弹幕类型 https://GitHub.com/jabbany/CommentCoreLibrary/blob/master/docs/CommentTypes.md "text": "test", // text 表示弹幕的文字内容。注意:在创造弹幕对象后,对 text 的更改将无意义。 "stime": 1000, // stime 表示弹幕相对于视频位置的开始时间(ms),0即在视频开始立即出现 "size": 25, // 弹幕的文字大小 "color": 0xffffff // 文字颜色 }]
接口属性说明
调用 player.getComponent(componentName) 之后会获取到组件对象, 就可以使用组件的方法
属性
弹幕组件拥有 CM 属性, 该属性即弹幕管理器 CommentManager 实例, CommentManager 属性方法请参考CommentManager 弹幕管理器
方法
弹幕组件有如下方法:
send(data:ICommentData) 直接发送一条实时弹幕, 实质上调用了 CM 的 send 方法, 参考文档 insert(data:ICommentData) 把弹幕插入弹幕列表(时间轴)。插入会动态调整目前的位置。实质上调用了 CM 的 insert 方法, 参考文档
阿里云Aliplayer播放器组件下载:
此处为隐藏内容,请评论后查看隐藏内容,谢谢!
文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...