乐趣区

关于vue.js:使用easywasmplayer实现视频流播放

jiezi

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>
退出移动版