@easydarwin/easyplayer
Version:
hls, flv and websocket player h265
151 lines (124 loc) • 6.66 kB
Markdown
# EasyPlayer.js
## 简介
集播放http-flv, hls, websocket 于一身的H5`视频直播/视频点播`播放器, 使用简单, 功能强大；
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS、WEBRTC、FMP4视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持Windows、Linux、Android、iOS全平台终端的H5播放器，使用简单, 功能强大。
## 功能说明
- [x] 支持重连播放；
- [x] 支持 WASM H264和H265解码;
- [x] 支持 m3u8/HLS (H265/H265)播放;
- [x] 支持 HTTP-FLV/WS-FLV (H265/H265)播放;
- [x] 支持 WEBRTC(H264/H265)播放;
- [x] 支持 MP4 播放
- [x] 支持 直播和点播播放;
- [x] 支持 点播多清晰度播放;
- [x] 支持 全屏或比例显示;
- [x] 支持 播放器快照截图;
- [x] 支持 视频录制Mp4格式;
- [x] 支持 超时、断网重连、异常暂停播放等;
- [x] 支持 解析视频i帧文件转base64;
- [x] 自动检测 IE 浏览器兼容播放;
## 配置属性
| 参数 | 说明 | 类型 | 默认值 |
| ------------------ | ------------------------------------------------ | -------------------------- | ------ |
| alt | 视频流地址没有指定情况下, 视频所在区域显示的文字 | String | 无信号 |
| aspect | 视频显示区域的宽高比 | String | 16:9 |
| autoplay | 自动播放 | Boolean | true |
| currentTime | 设置当前播放时间 | Number | 0 |
| decode-type | 解码类型 仅支持flv (soft: 强制使用wasm模式） | String | auto |
| easyStretch | 是否不同分辨率强制铺满窗口 | Boolean | false |
| live | 是否直播, 标识要不要显示进度条 | Boolean | true |
| loop | 是否轮播。 |Boolean | false |
| muted | 是否静音 | Boolean | true |
| poster | 视频封面图片 | String | - |
| reconnection | 视频出错时自动重连 | Boolean | false |
| resolution | 仅支持hls流; 供选择的清晰度 fhd:超清，hd:高清，sd:标清 | String | "yh,fhd,hd,sd" |
| resolutionDefault | 仅支持hls流 | String | "hd" |
| video-url | 视频地址 | String | - |
| has-audio | 是否渲染音频（音频有问题,请设置成false）仅支持flv | Boolean | true |
| video-title | 视频右上角显示的标题 | String | - |
| recordMaxFileSize | 录像文件大小(MB) | Number | 200 |
## 事件回调
| 方法名 | 说明 | 参数 |
| ---------- | ------------ | ---------------------|
| play | 播放事件 | |
| pause | 暂时事件 | |
| error | 播放异常 | |
| ended | 播放结束或直播断流 | |
| timeupdate | 当前播放时间回调| currentTime |
## 方法
| 方法名 | 说明 | 参数 |
| ---------- | ------------ | ---------------------|
| initPlayer | 初始化播放器 | |
| destroyPlayer | 销毁播放器 | |
| switchVideo | 播放开关 | |
| switchAudio | 静音开关 | |
| fullscreen | 全屏 | |
| exitFullscreen | 退出全屏 | |
| changeStretch | 视频拉伸模式 | |
| snapshot | 保存快照 | |
| switchRecording | 录像开关 | |
## HTML集成方式
```html
<html>
<head>
<title>EasyPlayerJS</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 全局引入 -->
<script type="text/javascript" src="EasyPlayer-element.min.js"></script>
</head>
<body>
<easy-player
video-url="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
live="false"
stretch="true" >
</easy-player>
</body>
</html>
```
## VUE集成方式
```
npm install @easydarwin/easyplayer --save
```
**注意：需要手动拷贝的文件**
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录
按需：H265解码需要
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录
```html
<!-- VUE HTML模板 引入JS-->
<!-- 注意：如果需要用到H265编码 WASM文件需要放到根目录-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
<title>EasyPlayer-demo</title>
<!-- 全局引入 -->
<script src="./EasyPlayer-lib.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!-- VUE文件中使用 -->
<easy-player
live
muted
autoplay
:video-url="camera.videoSrc"
style="width: 100%;height: 200px"
@error="restartPlayer"
/>
...... ...... import EasyPlayer from '@easydarwin/easyplayer'; ......
components: { EasyPlayer }
```
更多案例：<a href="https://github.com/EasyDarwin/EasyPlayer.js" target="_blank" >https://github.com/EasyDarwin/EasyPlayer.js</a>
## 更多流媒体音视频资源
EasyDarwin开源流媒体服务器：<a href="http://www.easydarwin.org" target="_blank" title="EasyDarwin开源流媒体服务器">www.easydarwin.org</a>
Copyright © <a href="http://www.easydarwin.org" target="_blank" title="EasyDarwin开源流媒体服务器">www.easydarwin.org</a> Team 2012-2024
## 技术专线
188-5511-6262（同微信）