阿里云播放器AliyunPlayer的走马灯组件的位置

最新推荐文章于 2024-08-07 09:41:06 发布

⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣

最新推荐文章于 2024-08-07 09:41:06 发布

阅读量1.2k

点赞数 1

文章标签： AliyunPlaye 走马灯

本文链接：https://blog.csdn.net/qq_38394249/article/details/98587000

版权

引入当前组件, 播放器配置中添加如下代码:

components: [{
  name: 'BulletScreenComponent',
  type: AliPlayerComponent.BulletScreenComponent,
  /** Descriptions of the scrolling text component parameters: text, style, bulletPosition 
   * text: The scrolling text
   * style: The style of the scrolling text
   * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
   */
  args: ['Welcome to use Aliplayer', {fontSize: '16px', color: '#00c1de'}, 'random']
}]

该组件接收三个参数:

text, style, bulletPosition

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

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

但是有的时候走马灯的位置随机的范围会很小,试了好久,发现是初始化阿里云播放器时宽度和高度写成了100%,改成具体数值之后问题解决