视频播放器 usc player开发手册

更新日志

version 0.0.0 (2022-012-30)

1.安装

//使用yarn安装 
yarn add usc-player
//使用npm安装
npm install usc-player

2.简单使用demo

//导入视频播放控制器
import {WebGLController} from 'usc-player'
const player = new WebGLController({gridLayout:4,el:document.getElementById('xxx')})
player.createPlayer(0,'0000000000840061','120.24.27.44:1936')
player.startPlay()

3.sdk说明

此项目为javascript项目，以下是一些重要的Api说明：

1.WebGLController初始化说明

此类用来实例化一个视频播放控制器,其初始化配置如下：

//此播放器已内置一套样式,如果不需要内置的,只需传gridLayout,el即可
const playerController = new WebGLController(
  {gridLayout:4, //表示要创建多少宫格的视频播放器,行列数为宫格的开平方(4表示2*2的宫格),13宫格除外,目前最大支持5*5(25宫格);
  el:document.getElementById('xxx'),//播放器将要放入的位置,必须为一个html元素;
  aspectRatio:'16/9', //视频宽高比,不传则默认撑满外层容器;
  showBorder:true, //是否展示宫格边框
  borderStyle:'1px solid blue', //边框样式
  playerDraggable:true, //启用视频元素拖拽
  draggable:true, //启用拖拽事件,需要先将showBorder置为true
  onDragstart:(currentDragElement)=>{}, //开启拖拽事件后生效,拖拽开始事件,currentDragElement为当前拖拽元素,可自定义样式;
  onDragend:(currentDragElement)=>{}, //开启拖拽事件后生效,拖拽结束事件,可自定义样式;
  onDragenter:(currentDragElement,targetElement)=>{}, //开启拖拽事件后生效,拖拽进入事件,targetElement为目标元素,可自定义样式;
  onDragleave:(currentDragElement,targetElement)=>{},//开启拖拽事件后生效,拖拽离开事件,可自定义样式;
  onDrop:(currentDragElement,targetElement,)=>{}, //开启拖拽事件后生效,拖拽完成时触发,可在此处调用createPlayer创建视频播放器
  onError:(e)=>{
    e的参数说明:
    type:0; //错误类型,数字无意义,仅作为区分
    message:'' //错误信息
  }, //错误事件,当播放器控制器发生错误时触发
  })

2.WebGLController接口说明

playerController.createPlayer(seq,file,url,info) //创建一个新的视频播放,seq为当前视频所在的宫格位置,从0开始,小于当前创建的宫格数;file为视频文件名,url为播放地址;info为当前视频名称信息,将显示在宫格上方;
playerController.startPlay() //开始播放,在创建好视频后请立即调用该方法实现播放;
playerController.destory() //销毁播放器,由于浏览器对webgl的数量限制,请在切换宫格时调用该方法销毁之前创建的播放器,并重新创建播放器;
playerController.fullScreen([seq]) //全屏方法,seq为可选参数,为当前需要全屏播放的视频序号,如果不传则视为宫格全屏;

3.播放器宫格适配

此播放器已内置一套样式,如果不需要内置的,只需传gridLayout,el即可,此时外层控制和样式需要前端开发者自己实现,以下是对宫格样式的适配说明: 1宫格划分,此播放器目前支持1,4,9,13,16,25宫格,除13宫格外,其余宫格均已其宫格数的开平方作为其行列数,例如:9宫格为3*3;

建议:此播放器内置的宫格样式使用grid布局,开发者如需自己实现,其css参考如下: 外层宫格容器样式: .test{ display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); }; 如果是13宫格布局,其第六个位置的宫格需要添加gridArea:2/2/4/4,表示该宫格占据两行两列; 如果项目使用第三方ui库,实现起来将更加简单;