# fullscreen

The full screen switching icon located in the control bar, used to switch the current video to full screen it calls the system full screen by default，in order to be compatible with the problem of inconsistency in the full screen of the mobile terminal，it is supported to use the full screen of the web page or rotate the full screen to replace the full screen effect

pluginName: fullscreen

# config

# position

• @type: String
• default: POSITIONS.ROOT_RIGHTFor specific enumeration values, please see plugin-positions

The plug-in Dom mount location

# index

• @type: Number
• default: 1

# rotateFullscreen

• @type: Boolean
• default: false
• @desc: default is false，Whether to use rotating horizontal screen If the configuration is true, when the icon clicked, the dom will be rotated 90 degrees in the vertical screen state to achieve the horizontal screen effect, which is generally used on the mobile terminal

# useCssFullscreen

• @type: Boolean
• default: false
• @desc: default is false，Whether to use page full screen instead of full screen function

If the configuration is true, the full screen button will call the full screen in the page

# needBackIcon

• @type: Boolean
• default: false
• @desc: default is false，whether to use the return button in the upper right corner when in full screen, this configuration is generally turned on on the mobile terminal

# target

• @type: HTMLElement
• default: null
• @desc: Customize the full-screen dom，If it is null, we will call full screen on player.root

This configuration item must be the parent node of player.root

# switchCallback

• @type: () => {} | null
• default: null
• @desc: Full screen switching custom implementation，this function configuration is equivalent to completely replacing the switching logic inside the plug-in

# API

# getRotateFullscreen(el)

• @desc: Enter rotating full screen, will trigger FULLSCREEN_CHANGEevent
• @param：{ HTMlElement? } el

# exitRotateFullscreen(el)

• @desc: Exit rotating full screen, will triggerFULLSCREEN_CHANGEevent
• @param：{ HTMlElement? } el

# changeFullScreen(e)

• @desc: Toggle full screen state
• @param：{ Events? } e

# hooks

# fullscreen_change

Execute when the user clicks the toggle button，E.g,

// Called by player
player.usePluginHooks('fullscreen', 'fullscreenChange', (plugin, ...args) =>{
  // TODO
})

// Called by plug-in instance
player.getPlugin('fullscreen').useHooks('fullscreenChange', (plugin, ...args) =>{
  // TODO
})

更深入的hook的调用方式

# demo

/**
 *  Configure to use the full screen effect of the web page
 */
const player = new Player({
  ...,
  fullscreen: {
    useCssFullscreen: true,
    position: 'controlsLeft' // Move the button to the left of the control bar
  }
})

/**
 *  Disable plugin
 */
const player = new Player({
  ...,
  ignores:[..., 'fullscreen']
})

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

player.getPlugin('fullscreen').changeFullScreen()