# EasyPlayer.js ## 简介 EasyPlayer.js H5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议,支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器。 ## 功能说明 - [x] 支持 m3u8/HLS 播放; - [x] 支持 HTTP-FLV/WS-FLV 播放; - [x] 支持 H265 播放; - [x] 支持直播和点播播放; - [x] 支持全屏显示; - [x] 支持重连播放;
## 集成使用示例 - **普通集成** ##### 1.引入 copy EasyWasmPlayer.js 到项目中 copy libDecoder.wasm到项目或者www的根目录(一定要根目录) ##### 2.在 html 中引用 EasyWasmPlayer.js ```html EasyWasmPlayer-Demo
```
- **VUE集成** ##### 1.下载 ``` npm install @easydarwin/easywasmplayer --save ``` ##### 2.拷贝 Vue-Cli3.0 环境下 copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下 copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目录下 ##### 3.在项目public目录index.html引入 ```html EasyWasmPlayer-Demo
``` ##### 4.VUE中使用 ```vue ``` ## 在线演示
**注意:** 若出现libDecoder.wasm的文件报404错误,提示找不到libDecoder.wasm文件,一定要排查是否存放在项目的根目录。 ## 实例化参数 var player = new wasmPlayer(url,ID,callbackFun,{cbUserPtr:this,cfKbs: fn, decodeType:"auto" or "soft", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false, HideKbs:" true" or "false}); | 参数 | 说明 | 类型 | 默认值 | | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------- | ------ | | url | 视频地址 | String | null | | ID | 播放器实例的divID(必传) | String | - | | decodeType | 解码类型(auto:默认,soft:强制H265解码) | String | auto | | openAudio | 是否打开音频 | Boolean | false | | BigPlay | 是否开启大的播放按钮 | Boolean | false | | Height | 播放器尺寸是否继承父盒子的 | Boolean | false | | HideKbs | 是否隐藏实时码率 | Boolean | false | | cfKbs | 码率速率回调(averageKbps:平均传输速率,averageKbs: 平均码率,currentKbps: 当前传输速率,currentKbs: 当前码率) | function | - | | callbackFun | 事件回调 | function | - | | cbUserPtr | 自定义指针(this的指向) | | this | ### 录像播放相关属性 #### 注意:currentTime属性只在播放录像m3u8 有结束标记(#EXT-X-ENDLIST)的的流时生效。 play(url,autoplay,currentTime) | 属性 | 说明 | 类型 | 默认值 | | -------- | --------------------------------------------- | ------- | ------------------| | url | 播放流地址 | String | - | | autoplay | 是否自动播放(0:默认,1:自动播放) | Number | 0 | | currentTime| 视频开始时间(换算成秒) | Number | 0 | ## 事件 | 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------- | | play | 播放事件 | url:'流地址',autoplay: '自动播放',currentTime:'开始时间' | | pause | 播放暂停 | - | | destroy | 停止播放 | - | | openAudio | 打开声音 | - | | closeAudio | 关闭声音 | - | | startLoading | 开始加载动画 | - | | endLoading | 结束加载动画 | - | | fullScreen | 开启或退出全屏 | - | | setSnap | 设置封面照 | 封面图片地址 | | endSnap | 清除封面照 | - |
### ✈ 更多视频解决方案资源汇总 - 流媒体技术:
© EasyDarwin开源流媒体服务器:http://www.easydarwin.org
© TSINGSEE视频开放平台:http://open.tsingsee.com
- 视频云服务:
© EasyDSS互联网视频云服务:http://www.easydss.com
© EasyCVR安防视频云服务:http://www.easycvr.com
© EasyGBS国标视频云服务:http://www.easygbs.com
© EasyRTC在线视频会议平台:http://www.easyrtc.cn
© EasyRTS即时通信云服务:http://www.easyrts.com
- 边缘计算:
© EasyNVR视频边缘计算网关:http://www.easynvr.com
© EasyNTS上云网关:http://www.easynts.com
© TSINGSEE Team:http://www.tsingsee.com
![青犀TSINGSEE](http://www.easydarwin.org/public/images/tsingsee_qrcode_160.jpg)