阿里云Aliplayer播放器 - 跑马灯广告功能组件

阿里云Aliplayer播放器跑马灯组件

主要用于一些滚动文字, 可以自定义出现的位置, 文字颜色和字体大小。

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 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浏览器不起作用。
    useH5Prism: true,//指定使用H5播放器。
    controlBarVisibility: 'click',//控制栏显示方式
    showBarTime: '5555',//控制栏自动隐藏时间
    components: [{
      name: 'BulletScreenComponent',
      type: AliPlayerComponent.BulletScreenComponent,
      args: ['十八码 - 18ma.cn', {fontSize: '20px', color: '#FFF'}, 'top']
    }, {
      name: 'BulletScreenComponent',
      type: AliPlayerComponent.BulletScreenComponent,
      args: ['十八码 - 18ma.cn', {fontSize: '20px', color: '#FFFF00'}, 'bottom']
    }, {
      name: 'BulletScreenComponent',
      type: AliPlayerComponent.BulletScreenComponent,
      args: ['十八码 - 18ma.cn', {fontSize: '20px', color: '#CC0033'}, 'random']
    }]
  });

该组件接收三个参数:

text, style, bulletPosition

text, String 类型, 需要显示的文字
style, Object 类型, 类似 CSS 的写法, CSS 属性名用驼峰式的写法
bulletPosition, 可选参数, 默认为 'random': 随机位置(位置滚动一次后会随机改变); 另外可以设置成 'top'(顶部) 或 'bottom'(底部)

注意: 为了防止跑马灯组件被隐藏或者删除, 跑马灯的 CSS 属性 display, visibility, opacity 分别被固定设置成 block, visible, 1。如果想设置跑马灯的透明度, 请设置组件参数 style 中的 opacity

阿里云Aliplayer播放器组件下载: