vue项目中 EasyPlayer 的封装与使用

vue中如何集成EasyPlay播放器

安装EsayPlay依赖（npm慢可以使用cnpm或者yarn）

npm install @easydarwin/easywasmplayer --save

安装完成后找到下面两个文件 拷贝到public文件下

node_modules >> @easydarwin >> easywasmplayer >> EasyWasmPlayer.js
node_modules >> @easydarwin >> easywasmplayer >> libDecoder.wasm

在index.html中引入EasyWasmPlayer.js

<script src="./EasyWasmPlayer.js"></script>

新建vue组件EsPlay完成播放器的封装。使用时引入传值即可。

注意：

1. 代码中的id用来实例化播放器窗口，为了同时可以打开多个播放器，所以id不能重复，使用uuid这个方法生成一个随机的id，该方法在后面给出。

2. 这个视频播放器带有logo，我在通过更改样式已经去除掉，如果需要删掉下面代码即可

<template>
  <div class="box">
    <div class="player-title">{{ videoName }}<div class="close-btn" @click="closeVideo" /></div>
    <div :id="id"></div>
  </div>
</template>
<script>
import uuid from '@/utils/uuid'
export default {
  props: {
    url: { // 接收视频流
      type: String,
      default: ''
    },
    videoId: { // 接受视频的id，用于关闭使用
      type: String,
      default: ''
    },
    videoName: { // 视频的名字
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: uuid() // 生成随机id
    }
  },
  mounted() {
    this.inintPlayer()
  },
  methods: {
    closeVideo() { // 通过穿进的id关闭播放器窗口
      this.$nextTick(() => {
        this.$emit('closePlayer', this.videoId)
      })
    },
    inintPlayer() {  // 播放器实例化
      this.$nextTick(() => {
        this.player = new WasmPlayer(null, this.id, this.callbackfun, { Height: true, fluent: true, HideKbs: true })
        this.player.play(this.url, 1)
      })
    }
    callbackfun(e) {}
  }
}
</script>
<style lang="scss" scoped>
  .box {
    width:100%;
    height:100%;
    background-color: #0a0d16;
    position: relative;
    /deep/ .iconqingxiLOGO:before { // 去除logo
      content: '';
    }
    /deep/ .iconfont + div {
      right: 55px;
    }
   .player-title {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      line-height: 25px;
      width: 100%;
      z-index: 10000;
      background: rgba(0, 0, 0, 0);
      color: #ffffff;
    }
    .close-btn {
      width: 20px;
      height: 20px;
      text-align: center;
      cursor: pointer;
      position: absolute;
      top: 2px;
      right: 2px;
      background-image: url("../assets/video/player-close.png")  no-repeat center;
    }
  }
</style>

uuid方法

export default function uuid() {
  var uuid = []
  var hexDigits = '0123456789abcdef'
  for (var i = 0; i < 36; i++) {
    uuid[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
  }
  uuid[14] = '4'
  uuid[19] = hexDigits.substr((uuid[19] & 0x3) | 0x8, 1)
  uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
  return 'u' + uuid.join('').replaceAll('-', '')
}

你搞定了没