西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

controls

控制栏插件,默认注册。源码

pluginName: controls

Note

该插件为默认注册插件,如果禁用,则在其上创建的所有icon、进度条都将一同禁用

config

root

  • @type: HTMLElement
  • default: player.root

控制挂载的容器,默认挂载在player.root, 播放器根节点

autoHide

  • @type: Boolean
  • default: true

是否支持自动隐藏,默认true, 如果为false,则会常驻,例如:

const playerConfig = {
  controls: {
    autoHide: true
  }
  ...
}

mode

  • @type: String
  • default: normal
  • 枚举值: normal/flex/bottom

控制栏内部布局方式,以下为三种布局方式效果图

const playerConfig = {
  controls: {
    mode: 'normal'
  }
  ...
}

不同布局方式显示方式如下所示

normal

播放按钮分布于左右两边,进度条位于顶部

flex两侧播放按钮和播放进度条呈三排布局

bottom

播放按钮分布于左右两边,进度条位于底部

initShow

  • @type: Boolean
  • default: false

是否在播放器初始化的时候就显示,默认为播放器起播之后才会显示控制栏

属性

root

  • @type: HTMlElement

根节点

通过指定根节点,可以将控制栏指定挂载在位于播放器容器(player.root)以外的dom节点上,效果如下:

controls11

实现demo如下

  <div id="video0"></div>
  <div class="split"></div>
  <div class="xgplayer" style="height: 70px;" id="controls_new_root"></div>
import Player from 'xgplayer'

const player = new ({
  id: 'video0',
  controls: {
    root: document.getElementById('controls_new_root')  // 指定播放器之外挂载dom
  } 
})