阿里云Aliplayer播放器 - 弹幕组件

阿里云Aliplayer播放器弹幕组件

其他语言: English

集成了 CommentCoreLibrary 弹幕库, 更多文档请查看 CommentCoreLibrary文档

在控制条上增加了弹幕关闭和开启按钮, 以及发送弹幕的输入框, 和发送弹幕的按钮

阿里云Aliplayer弹幕组件使用说明

引入阿里云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播放器组件下载: