文章最后更新时间:2024年05月17日已超过417天没有更新。
其他语言: 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://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播放器组件下载:
此处为隐藏内容,请评论后查看隐藏内容,谢谢!
文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。
发表评论