# hls-video

> ckplayer 的进一步封装，使用

Latest version **1.6.2** (published 2021-03-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install hls-video
pnpm add hls-video
yarn add hls-video
bun add hls-video
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.2 |
| Published | 2021-03-03 |
| First published | 2019-07-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jinzhaochao |
| Maintainers | jinzhaochao |

## Links

- npm: https://www.npmjs.com/package/hls-video
- npm.io page: https://npm.io/package/hls-video

## Dependencies (4)

- [flv.js](https://npm.io/package/flv.js.md) ^1.5.0
- [hls.js](https://npm.io/package/hls.js.md) ^0.14.17
- [ypkgfiles](https://npm.io/package/ypkgfiles.md) ^1.6.0
- [file-loader](https://npm.io/package/file-loader.md) ^4.0.0

## Recent versions

- 1.6.2 (latest) — 2021-03-03
- 1.6.1 — 2021-03-02
- 1.6.0 — 2021-03-02
- 1.5.1 — 2019-10-30
- 1.5.0 — 2019-10-30
- 1.2.1 — 2019-07-23
- 1.0.8 — 2019-07-09
- 1.0.7 — 2019-07-09
- 1.0.6 — 2019-07-09
- 1.0.3 — 2019-07-03
- 1.0.2 — 2019-07-03
- 1.0.1 — 2019-07-03
- 1.0.0 — 2019-07-03

## README

## 加载优化
1. head中的<script>加载拉到body下面执行优先渲染页面，减少页面空白时间
2. <script>进行异步加载处理
3. 图片资源文件体积减少（如登录页背景页）
4. ~~减少cesium.js体积（试着寻找cesium.min.js）~~
5. 资源文件预加载（如登录页背景图）
6. 压缩app.js和app.css文件的体积



## 介绍

### 简介
HLSVideo.js是支持了两种播放模式(flash:基于ckplayer.js开发，webRTC:基于kurento-utils.min.js)

### 功能点

* 初始化视频
* 视频单播及组播功能 
* 视频点击功能实现
* 视频断开自动重连

## 使用

### 安装

```bash
$ npm install hls-video
```

### 引入

```js
import {HLSVideo,WSVideo,VWPVideo} from 'hls-video'

//flash播放
let hlsVideo = new HLSVideo({
    el: 'video',
    url: 'http://106.120.131.69:10328/mag/hls/8ef4192b2c5945a2b0107ec84ae3d57a/0/live.m3u8',
    click: (obj) => {
      console.log(obj)
     
    },
    loaded: (obj) => {
      console.log('onLoadedonLoadedonLoadedonLoaded', obj)
    }
})

// webRTC播放
let wsVideo = new WSVideo({
  el: 'video',
  url: 'ws://101.68.79.42:18099/signal',
  code: 'hik01',
  stream: 0,
  click: (obj) => {
    console.log(obj)
  },
  loaded: (obj) => {
    console.log('onLoadedonLoadedonLoadedonLoaded', obj)
  }
})
  
// VWPVideo 播放
this.palyer = new VWPVideo({
  el: 'video',
  url: '004f33e75a2a476d97a70fc4f418236b',
  code: 'hik01',
  stream: 0,
  option: {
    appkey: '22172574',
    secret: 'wjtWJdLkhHbgX3lyxRPt',
    ip: '150.129.138.93',
    port: 443,
    playMode: 0, //播放模式 0-预览 1-回放
    startTime: '2019-08-02 00:00:00',  // 回放开始时间 注意时间格式
    endTime: '2019-08-02 23:59:59'  // 回放结束时间 注意时间格式
  }
})
  
```

### API 

#### play

播放视频

#### remove

移除视频模块（暂停播放也是调用此方法）


#### fullScreen

全屏播放视频

## Example

[DEMO](http://192.168.0.240:7878/font-guankong/flashvideo-demo)

## API 
 
暂未编写

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