# usc-player

> usc player

Latest version **1.0.7** (published 2023-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install usc-player
pnpm add usc-player
yarn add usc-player
bun add usc-player
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2023-01-10 |
| First published | 2023-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jzg |

## Links

- npm: https://www.npmjs.com/package/usc-player
- npm.io page: https://npm.io/package/usc-player

## Dependencies (2)

- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^15.0.1
- [rollup-plugin-polyfill-node](https://npm.io/package/rollup-plugin-polyfill-node.md) ^0.11.0

## Recent versions

- 1.0.7 (latest) — 2023-01-10
- 1.0.6 — 2023-01-10
- 1.0.5 — 2023-01-06
- 1.0.4 — 2023-01-04
- 1.0.3 — 2023-01-03
- 1.0.2 — 2023-01-03
- 1.0.1 — 2023-01-03
- 1.0.0 — 2023-01-03

## README

## 视频播放器 usc player开发手册 

### 更新日志
#### version 0.0.0 (2022-012-30)
### 1.安装
```
//使用yarn安装 
yarn add usc-player
//使用npm安装
npm install usc-player
```
### 2.简单使用demo
```javascript
//导入视频播放控制器
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初始化说明
此类用来实例化一个视频播放控制器,其初始化配置如下：
```javascript
//此播放器已内置一套样式,如果不需要内置的,只需传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接口说明
```javascript

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库,实现起来将更加简单;

---
_Source: https://npm.io/package/usc-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._