共计 1725 个字符，预计需要花费 5 分钟才能阅读完成。
easywasmplayer 文档地址：https://www.npmjs.com/package/easywasmplayer
一：介绍
EasyPlayer.js H5 播放器，是一款可能同时反对 HTTP、RTMP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协定，反对 H.264、H.265、AAC 等多种音视频编码格局，反对 mse、wasm 等多种解码形式，反对 Windows、Linux、Android、iOS 全平台终端的 H5 播放器。
二：html+js 实现视频流播放
<!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('视频流地址', 1);
// 播放事件回调
function callbackFun(e) {console.log(e)
}
</script>
</body>
</html>三：vue 实现视频流播放
1：装置 easywasmplayer
npm install @easydarwin/easywasmplayer --save2：拷贝
将 @easydarwin/easywasmplayer/EasyWasmPlayer.js 和 @easydarwin/easywasmplayer/libDecoder.wasm 拷贝到我的项目 public 目录下
3：在 public 目录下的 index.html 引入 easywasmplayer
<!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>
4：应用 easywasmplayer 实现视频流播放
<template>
<div class="box">
<div id="Player"></div>
</div>
</template>
<script>
export default {data() {
return {
player: '',
url: '视频流地址'
}
},
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>
正文完
