Vue2 uses easyplayer

Let’s talk about the use of easyplayer in vue2. It has not been tested in vue3. It is estimated that it should be similar. You can verify it yourself.

Install:

pnpm i @easydarwin/easyplayer

Component encapsulation

Habitually encapsulate it as a separate component

<template>
  <div class="EasyPlayer">
    <easy-player
      style="width: 100%;height: 100%;"
      @error="restartPlayer"
      @ended="restartPlayer"
      @play="videoPlay"
      ref="EasyPlayerRef"
      :videoUrl="url"
      :aspect="aspect"
      :showEnterprise="false"
      :show-custom-button="false"
      :alt="alt"
      :autoplay="autoplay"
      :loop="loop"
      :muted="muted"
      fluent
      stretch
    >
    </easy-player>
  </div>
</template>
<script>
  import EasyPlayer from '@easydarwin/easyplayer'
  export default {
    data() {
      return {
        timer: null
      }
    },
    components: { EasyPlayer },
    props: {
      url: {
        type: String,
        default: ''
      },
      aspect: {
        type: String,
        default: '16:9'
      },
      alt: {
        type: String,
        default: '无信号'
      },
      autoplay: {
        type: Boolean,
        default: true
      },
      loop: {
        type: Boolean,
        default: true
      },
      muted: {
        type: Boolean,
        default: true
      }
    },
    destroyed() {
      if(this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    methods: {
      restartPlayer(e) {
        console.log(e,'播放异常或播放结束或直播断流------->>>>>>>>>')
        this.$refs.EasyPlayerRef.initPlayer()  //初始化播放器
        this.$emit('pullFlow')
        this.timer = setInterval(() => {
          this.$refs.EasyPlayerRef.initPlayer()  //初始化播放器
          this.$emit('pullFlow')
        }, 3000)
      },
      // 播放事件
      videoPlay(a) {
        // console.log(a,'视频播放------>>')
        if(this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      },
    },
  }
</script>
<style scoped>
.EasyPlayer {
  width: 100%;
  height: 100%;
}
  /* 阻止单击双击视频全屏或者跳转官网 */
  /* /deep/ .vjs-tech {
    pointer-events: none!important;
  } */

  /* /deep/ .video-js.vjs-fullscreen::backdrop,:not(:root):fullscreen::backdrop {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    width: 50%!important;
    height: 50%!important;
    right: 50%!important;
    bottom: 50%!important;
    background-color: transparent!important;
  }


  /deep/ .video-js.vjs-fullscreen .vjs-tech {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%!important;
    height: 50%!important;
    transform: translateX(-50%)!important;
  }

  /deep/ .video-js {
    background-color: transparent!important;
  } */
</style>

 Introduce and use

<template>
  <div class="container">
    <div class="easy-player">
      <EasyPlayer
        :url="playerUrl"
        @pullFlow="pullFlow"
      />
    </div>
  </div>
</template>
<script>
import EasyPlayer from './EasyPlayer/index.vue'
export default {
  data() {
    return {
      playerUrl: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
    }
  },
  components: { EasyPlayer },
  methods:{
    // 播放异常 重新拉流
    pullFlow() {
      // .....
    }
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 100px 0 0 100px;
  box-sizing: border-box;
}

.easy-player {
  width: 450px;
  height: 300px;
  border: 1px solid red;
}
</style>

Error handling

You will find the following error on the console 

Don’t panic when you see an error, everyone just follow me and deal with it.

First, we install a plug-in (note: it should not be greater than version 6.0, otherwise there will be bugs and random errors): 

pnpm add [email protected] --save-dev

Then in vue.config.js: 

const { defineConfig } = require("@vue/cli-service");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = defineConfig({
  // easy-player  相关
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
          to: './libs/EasyPlayer/'
        },
        {
          from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
          to: './libs/EasyPlayer/'
        },
        {
          from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
          to: './libs/EasyPlayer/'
        }
      ])
    ]
  },
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false
});

The configuration is not over yet. You still need to introduce EasyPlayer-element.min.js in public/index.html. You can directly find dist/element/EasyPlayer-element.min.js under @easydarwin/easyplayer in node_modules and copy it to the public directory. Next, EasyPlayer.wasm also needs to be placed in the public directory as shown below:

 

Then import it under public/index.html 

<script src="/lib/EasyPlayer-element.min.js"></script>

That’s OK!