# fullscreen

位于控制栏的全屏切换组件，用于将当前视频全屏切换 全屏组件默认调用系统全屏，为了兼容移动端全屏不统一问题，支持使用网页全屏或者旋转全屏替代全屏效果

pluginName: fullscreen

# config

# position

• @type: String
• default: controlsRight, 具体枚举值请看plugin-positions

插件DOM挂载位置，默认为player.controls.right

# index

• @type: Number
• default: 1

插件DOM在挂载点内的排序，默认为1，越小越靠前（若index相同，后实例化的插件会被放置在前面）

# rotateFullscreen

• @type: Boolean
• default: false
• @desc: 默认为false，是否使用旋转横屏，该配置优先级低于useCssFullscreen配置。 该配置为true, 全屏将会在竖屏状态下把dom旋转90度实现横屏效果，一般在移动端使用

# useCssFullscreen

• @type: Boolean
• default: false
• @desc: 默认为false，是否使用页面全屏代替全屏功能

该配置为true, 全屏按钮将会调用页面内全屏

# useScreenOrientation

• @type: Boolean
• default: false
• @desc: 默认为false，本配置仅在系统全屏时生效，CSS全屏时不生效。 该配置为true时, 如果 ScreenOrientation Lock 可用并且视频宽高比大于1，则在 requestFullScreen 之后使用其锁定屏幕方向为横屏。 该配置类似 rotateFullscreen，但 rotateFullscreen 配合CSS全屏使用。

# lockOrientationType

• @type: OrientationType
• default: landscape
• @desc: 默认为landscape，全屏后锁定方向为横屏。仅在系统全屏时生效，CSS全屏时不生效。 该配置需配合 useScreenOrientation 使用。

# needBackIcon

• @type: Boolean
• default: false
• @desc: 默认为false，全屏的时候是否使用右上角返回按钮, 该配置一般在移动端开启

# target

• @type: HTMLElement
• default: null
• @desc: 自定义全屏作用的dom，默认是播放器根节点, 该配置项必须是player.root的父辈节点，使用场景是解决全屏下和player.root同级的dom需要显示的场景

# switchCallback

• @type: () => {} | null
• default: null
• @desc: 全屏切换自定义实现，该函数配置相当于完全替代插件内部的切换逻辑

# API

# getRotateFullscreen(el)

• @desc: 进入旋转全屏, 会下发FULLSCREEN_CHANGE事件
• @param：{ HTMlElement? } el 全屏作用的dom节点，传入参数须是播放器容器player.root的父辈节点（默认为播放器容器player.root）

# exitRotateFullscreen(el)

• @desc: 退出旋转全屏, 会下发FULLSCREEN_CHANGE事件
• @param：{ HTMlElement? } el 全屏作用的dom节点，传入参数须是播放器容器player.root的父辈节点（默认为播放器容器player.root）

# changeFullScreen(e)

• @desc: 切换全屏状态，切换的时候使用哪种全屏API取决于fullscreen插件的配置
• @param：{ Events? } e

# hooks

# fullscreenChange

用户点击切换按钮的时候执行，具体使用方式如下,

// 通过player调用
player.usePluginHooks('fullscreen', 'fullscreenChange', (plugin, ...args) =>{
  // TODO
})

// 通过插件实例调用
player.getPlugin('fullscreen').useHooks('fullscreenChange', (plugin, ...args) =>{
  // TODO
})

更深入的hook的调用方式

# demo

/**
 *  配置使用网页全屏效果实现
 */
const player = new Player({
  ...,
  fullscreen: {
    useCssFullscreen: true, // 使用网页内全屏替换全屏效果
    position: 'controlsLeft' // 按钮移动到控制栏左侧
  }
})

/**
 *  禁用插件
 */
const player = new Player({
  ...,
  ignores:[..., 'fullscreen']
})

/**
 *  调用API
 */
const player = new Player({...})

// 调用API切换状态
player.getPlugin('fullscreen').changeFullScreen()