简介

easyPlayer 播放库是一款兼容性比较强的播放库，根据网上的资料，测试了两次出现了多种问题，又从新下载了一个js库能正常播放

功能实现

安装

1、下载EasyWasmPlayer.js 、 libDecoder.wasm 到本地，然后放在public 根目录下面：

image.png

2、在index.html文件中引用EasyWasmPlayer.js

image.png

3、编写播放页面

<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <h4>H265播放器</h4>
        <div class="player-box">
          <div id="wasmPlayer"></div>
        </div>
        <div style="width:100%;margin: auto;">
          <div id="newplay" onClick="onplay"></div>
          <el-input v-model="input" placeholder="请输入播放地址接口" size="mini"></el-input>
          <el-button class="player-button" size="mini" type="success" @click="play">播放</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        input: 'http://124.160.101.172:7036/xx/1000104%240/substream/1.m3u8',      //视频播放地址(本地址已处理过)
        player: ''      //播放器对象
      }
    },
    mounted() {
      //实例化播放器
      this.player = new WasmPlayer(null, 'wasmPlayer', this.callbackfun, {
        Height: true, //Height:播放器尺寸是否继承父盒子的
        openAudio: true, //openAudio:是否打开音频
        BigPlay: false,
        HideKbs: true //HideKbs:是否隐藏实时码率
      })
      this.play()
    },
    methods: {
      // 播放事件
      play() {
        if (!this.input) {
          this.$message.error('请输入接口地址！')
        } else {
          this.player.play(this.input, 1)
        }
      },
      //回调函数
      callbackfun(e) {
        console.log(e)
        if (e == 'pause') {//暂停事件
          this.player.setSnap('images/logo_1.png')//显示封面图片
        } else if (e == 'play') {
          this.player.endSnap()//清除封面图片
          this.player.endLoading()//取消Loading显示
        }
      }
    }
  }
</script>
# 样式就不粘贴了， 官网都有

这样就可以正常播放了

参考资料:

http://33h.co/km9jh
https://www.mdaima.com/news/157.html
https://github.com/tsingsee/EasyPlayer.js (demo，可以运行，但是我完全复制到我的项目中， js 报错，_typeof is not defined, 替换下我的播放库就好了 )