vue及H5中使用easywasmplayer H265播放器

EasyWasmPlayer播放器，就是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）、WS-FLV视频直播与视频点播等多种协议，重点在于该播放器是一款支持H5的播放器，可以兼容H.265编码格式视频在web浏览器上面的直播。

参考资料：
该播放器可以实现在html中集成以及vue中集成。
具体的文档在easywasmplayer安装包的readme文档中有介绍。
在这里插入图片描述
详细的html、vue示例代码：github示例项目代码

官方的文档地址：
开源中国：https://my.oschina.net/u/4619556
CSDN：https://blog.csdn.net/xiejiashu
github：https://github.com/tsingsee
博客园：https://www.cnblogs.com/EasyNVR/

https://gitee.com/organizations/scitechlabs/projects

一、在vue中使用easywasmplayer

1、安装插件

 npm install @easydarwin/easywasmplayer --save

安装之后在当前项目文件夹中的node-modules目录中能够找到@easydarwin–>easywasmplayer：
在这里插入图片描述

2、拷贝文件到项目public文件夹中

将EasyWasmPlayer.js以及libDecoder.wasm文件拷贝到vue项目的public文件夹下：
在这里插入图片描述

3、在public目录index.html中添加引用

<!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、在vue中使用

定义一个div标签用于播放视频画面
实例化播放器
调用播放器进行播放、暂停、关闭等

<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>

5、参数解释

var player = new wasmPlayer(url,ID，callbackFun,{cbUserPtr:this,cfKbs: fn, decodeType:"auto" or "soft", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false, HideKbs:" true" or "false});

在这里插入图片描述
事件的方法名和说明：

其他：
暂停视频播放：

this.player.pause(this.video_addr);

关闭视频播放：

this.player.destroy(this.video_addr)

关闭之后，再需要启动播放则需重新初始化播放器示例：

this.player = new WasmPlayer(null,"video_player",this.callback,{Height:true})
this.player.play(this.video_addr,1);

二、在Html中使用easywasmplayer

新建index.html文件，将EasyWasmPlayer.js以及libDecoder.wasm放在该文件夹中：
在这里插入图片描述
index.html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyWasmPlayer</title>
    <script src="./EasyWasmPlayer.js"></script>
</head>

<body>
    <h4 style="width:600px;margin: auto;">H265播放器</h4>
    <br>
    <div style="width:600px;height: 400px; background-color:pink;margin: auto;">
        <div id="newplay" onClick="onplay"></div>
        <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
        <p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p> 
        <input type="text" id="value">
        <button id="btn">播放</button>
    </div>
    <script>
        // 播放器回调函数
        callbackfun = function (e) { 
            console.log(e);
        }
        // 播放按钮
        var btn = document.getElementById('btn'); 
        // 地址栏
        var value = document.getElementById('value');
        // 实例播放器
        var player = new WasmPlayer(null, 'newplay', callbackfun,{
            Height:true
        })
        //播放事件 传入地址播放
        btn.onclick = function(){
            player.play(value.value,1);
            console.log(value.value);
        }
    
    </script>
</body>
</html>

运行后界面显示如下：
在这里插入图片描述
备注：需要使用合适的视频地址，否则不能播放。
需要使用合适的node版本：本例使用node v10.13.0，太高或者太低都可能出现编译不通过的报错，具体node版本管理和选择nvm管理多版本node。

原文链接：https://blog.csdn.net/Nie2014/article/details/114651376