EasyPlayer.js在使用vue3中使用

npm install @easydarwin/easyplayer --save

把 node_modules/@easydarwin/easyplayer/dist/element目录下的文件

 复制到public内

index.html

<script type="text/javascript" src="/js/EasyPlayer-element.min.js"></script>

在使用的vue内直接写

<template>
 <div id="video-player-box">
  <easy-player id="EasyPlayer" ref="vVideoPlayerRef" live muted autoplay :has-audio="videoOption.hasAudio" :video-url="videoOption.videoUrl"></easy-player>
  <div class="operation-box">
   <div>
    <el-checkbox v-model="videoOption.hasAudio" label="音频（音频有问题,请设置成false，仅支持flv）" size="large" />
   </div>
   <div>
    <span>视频地址：</span>
    <el-input v-model="videoOption.videoUrl" style="width: 500px; margin-right: 10px" placeholder="请输入视频地址" />
    <el-button type="primary" @click="initPlay">初始化</el-button>
    <el-button v-if="videoOption.status" type="primary" @click="switchVideo">播放</el-button>
    <el-button v-else @click="switchVideo">暂停</el-button>
   </div>
  </div>
 </div>
</template>

<script setup>
import { ref } from 'vue';

const videoOption = ref({
 //视频地址
 videoUrl: '',
 //是否静音
 hasAudio: false,
 status: true
});
const vVideoPlayerRef = ref(null);

const initPlay = () => {
 let player = vVideoPlayerRef.value.getVueInstance();
 player.destroyPlayer();
 player.initPlayer();
};

const switchVideo = () => {
 let player = vVideoPlayerRef.value.getVueInstance();
 player.switchVideo();
 videoOption.value.status = !player.pause;
};
</script>

配置属性

事件回调

Vue方法

注:has-audio是否渲染音频（音频有问题,请设置成false）仅支持flv