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 播放;
-
支持直播和点播播放;
-
支持全屏显示;
-
支持重连播放;
- 普通集成
copy EasyWasmPlayer.js 到项目中
copy libDecoder.wasm到项目或者www的根目录(一定要根目录)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
<style>
.box {
width:600px;
height:400px;
}
</style>
</head>
<body>
<div class="box">
<div id="Player"></div>
</div>
<script>
// 实例化播放器
var Player = new WasmPlayer(null,'Player',callbackFun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true});
// 调用播放
Player.play('url', 1)
</script>
</body>
</html>
- VUE集成
npm install @easydarwin/easywasmplayer --save
Vue-Cli3.0 环境下
copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下
copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目录下
<!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>EasyWasmPlayer-Demo</title>
<script src="./EasyWasmPlayer.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<template>
<div class="box">
<div id="Player"></div>
</div>
</template>
<script>
export default {
data() {
return {
player: '',
url: 'http://127.0.0.1:10080/fvod/PnCsnxdMg/video.m3u8'
}
},
mounted() {
// 实例化播放器
this.player = new WasmPlayer(null, 'Player', this.callbackfun)
// 调用播放
this.player.play(this.url, 1)
},
methods: {
callbackfun(e) {
console.log('callbackfun', e);
}
}
}
</script>
<style>
.box {
width:600px;
height:400px;
}
</style>
注意: 若出现libDecoder.wasm的文件报404错误,提示找不到libDecoder.wasm文件,一定要排查是否存放在项目的根目录。
var player = new wasmPlayer(url,ID,callbackFun,{cbUserPtr:this, decodeType"auto" or "soft", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false});
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 视频地址 | String | null |
ID | 播放器实例的divID (必传) | String | - |
callbackFun | 事件回调 | function | - |
cbUserPtr | 自定义指针 (this的指向) | this | |
decodeType | 解码类型(auto:默认,soft:强制H265解码) | String | auto |
openAudio | 是否打开音频 | Boolean | false |
BigPlay | 是否开启大的播放按钮 | Boolean | false |
Height | 播放器尺寸是否继承父盒子的 | Boolean | false |
play(url,autoplay,currentTime)
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
url | 播放流地址 | String | - |
autoplay | 是否自动播放 | Boolean | 默认0 |
currentTime | 视频开始时间(换算成秒) | Number | 默认this |
方法名 | 说明 | 参数 |
---|---|---|
play | 播放事件 | url:'流地址',autoplay: '自动播放',currentTime:'开始时间' |
pause | 播放暂停 | - |
destroy | 停止播放 | - |
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