easywasmplayer實現(xiàn)視頻流播放示例詳解

更新時間：2023年09月22日 09:04:05 作者：huaweichenai

這篇文章主要為大家介紹了easywasmplayer實現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一：介紹

easywasmplayer文檔地址：https://www.npmjs.com/package/easywasmplayer

EasyPlayer.js H5播放器，是一款能夠同時支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）視頻直播與視頻點播等多種協(xié)議，支持H.264、H.265、AAC等多種音視頻編碼格式，支持mse、wasm等多種解碼方式，支持Windows、Linux、Android、iOS全平臺終端的H5播放器。

二：html+js實現(xiàn)視頻流播放

<!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});
      // 調(diào)用播放
      Player.play('視頻流地址', 1);
      //播放事件回調(diào)
      function callbackFun(e) {
        console.log(e)
      }
    </script> 
</body>
</html>

三：vue實現(xiàn)視頻流播放

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" rel="external nofollow"  />
    <title>EasyWasmPlayer-Demo</title>
    <script src="./EasyWasmPlayer.js"></script> 
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

4：使用easywasmplayer實現(xiàn)視頻流播放

<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)
    // 調(diào)用播放
    this.player.play(this.url, 1)
  },
  methods: {
    //播放事件回調(diào)
    callbackfun(e) {
      console.log('callbackfun', e);
    }
  }

以上就是easywasmplayer實現(xiàn)視頻流播放示例詳解的詳細內(nèi)容，更多關于easywasmplayer視頻流播放的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: