EasyPlayer.js
简介
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
功能说明
-
支持 HTTP-MP4 播放
-
支持 m3u8/HLS 播放;
-
支持 HTTP-FLV/WS-FLV 播放;
-
支持 H265 播放;
-
支持直播和点播播放;
-
支持全屏显示;
-
支持重连播放；
HTML 集成示例
-
使用方式
-
普通集成
copy EasyWasmPlayer.js 到项目中
copy libDecoder.wasm到项目或者www的根目录（一定要根目录）
在 html 中引用 EasyWasmPlayer.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/EasyWasmPlayer.js"></script>
</head>
<body>
<div style="width:600px;height:400px;background-color:black;margin-left:200px">
<div id="265Player">
</div>
<script>
callbackFun = function (e) {
console.log(e);
}
var 265Player = new WasmPlayer(null,'265Player'，callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true})
</script>
</div>
</body>
</html>
- vue集成
npm install @easydarwin/easywasmplayer --save
- Vue 集成调用
copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到public文件目录
copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目根目录
注意： 若出现libDecoder.wasm的文件错误是此文件路径不对
在 html 中引用 EasyWasmPlayer.js
demo
<!DOCTYPE html>
<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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./EasyWasmPlayer.js"></script>
</head>
<body>
<noscript>
<strong
>We're sorry but easynvr-token doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
实例化参数
var player = new wasmPlayer(url,ID，callbackFun,{cbUserPtr:this, decodeType"auto", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false});
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 视频地址 | String | null |
| ID | 播放器实例的divID (必传) | String | - |
| callbackFun | 事件回调 | - | |
| cbUserPtr | 自定义指针 (this的指向) | this | |
| decodeType | 解码类型 | auto | |
| openAudio | 是否打开音频 | Boolean | false |
| BigPlay | 是否开启大的播放按钮 | Boolean | false |
| Height | 播放器尺寸是否继承父盒子的 | Boolean | false |
录像播放相关属性
注意：currentTime属性只在播放录像m3u8 有结束标记（#EXT-X-ENDLIST）的的流时生效。
play(url,autoplay,currentTime)
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 播放流地址 | String | - |
| autoplay | 是否自动播放 | Boolean | 默认0 |
| currentTime | 视频开始时间(换算成秒) | Number | 默认this |
事件
| 方法名 | 说明 | 参数 |
|---|---|---|
| play | 播放事件 | url:'流地址',autoplay: '自动播放',currentTime:'开始时间' |
| pause | 播放暂停 | - |
| stop | 停止播放 | - |
| openAudio | 打开声音 | - |
| closeAudio | 关闭声音 | - |
| startLoding | 开始加载动画 | - |
| endLoding | 结束加载动画 | - |
| fullScreen | 开启或退出全屏 | - |
✈ 更多视频解决方案资源汇总
-
流媒体技术：
© 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
