共计 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 --save
2：拷贝
将 @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> |
正文完
