# controls

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

pluginName: controls

# 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节点上，效果如下：

实现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
  } 
})