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

内置插件挂载配置

所有的内置UI插件都支持position和index两个保留配置项，用于指定插件的挂载位置和在挂载的父节点中的定位顺序

position配置

position用于指定UI插件的dom挂载位置，目前定义的位置如下图所示

控制栏为默认布局image.png

控制栏为flex布局image.png

  • 插件在不指定position，也不指定root参数的情况下，默认挂载在根节点root(即player.root)下；
  • ROOT_TOP、ROOT_RIGHT、ROOT_LEFT会在播放器失去焦点的时候自动隐藏
  • 手机小屏flex布局下，中间位置自适应，一般中间位置都是进度条

枚举值

position的枚举值如下

Plugin.POSITIONS = {
  ROOT: 'root',                     //挂载在根节点上
  ROOT_LEFT: 'rootLeft',            //挂载在播放器容器的左侧边栏
  ROOT_RIGHT: 'rootRight',          //挂载在播放器容器的右侧边栏
  ROOT_TOP: 'rootTop',              //挂载在播放器容器的顶部边栏
  CONTROLS_LEFT: 'controlsLeft',    //挂载在播放器控制栏的左侧
  CONTROLS_RIGHT: 'controlsRight',  //挂载在播放器控制栏的右侧
  CONTROLS_CENTER: 'controlsCenter' //挂载在播放器控制栏的中间控制条位置
}

使用demo

全屏切换按钮默认位置是在控制栏的右侧第一的位置，如下图1；如果需要将该按钮移动到左侧第一的位置，达到图2的效果

图1 全屏按钮默认位置

positions0

图2 全屏按钮定位到左侧

positions1

具体实现demo如下

import Player, { Plugin } from 'xgplayer'

const player = new Player({
  ...,
  fullscreen: {
    position: Plugin.POSITIONS.CONTROLS_LEFT, // 定位在控制栏左侧
    index: 2 // 位置索引为2
  }
})

控制栏位置定制

控制栏和画面分离

播放默认控制栏是和视频画面重合的，如图1所示; 如果需要控制栏和画面分离，不遮挡画面，目前提供了一个配置项margincontrols, 达到如图2的效果

图1 默认重叠controls1

图2 分离controls3

除了以上的配置，也支持控制栏挂载到播放器容器以外的任意位置，具体效果和实现方式详见内置插件->controls

← controls →