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

fullscreen

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

pluginName: fullscreen

config

position

插件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

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

Note

这个hook在alpha版本中命名为fullscreen_change

// 通过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()