EasyPlayer.js在使用vue3中使用

npm install @easydarwin/easyplayer --save

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

复制到public内

index.html

代码语言：javascript复制

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

在使用的vue内直接写

代码语言：javascript复制

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

配置属性

参数	说明	类型	默认值
alt	视频流地址没有指定情况下, 视频所在区域显示的文字	String	无信号
aspect	视频显示区域的宽高比	String	16:9
autoplay	自动播放	Boolean	true
currentTime	设置当前播放时间	Number	0
decode-type	解码类型 仅支持flv (soft: 强制使用wasm模式）	String	auto
easyStretch	是否不同分辨率强制铺满窗口	Boolean	false
live	是否直播, 标识要不要显示进度条	Boolean	true
loop	是否轮播。	Boolean	false
muted	是否静音	Boolean	true
poster	视频封面图片	String	-
reconnection	视频出错时自动重连	Boolean	false
resolution	仅支持hls流; 供选择的清晰度 fhd:超清，hd:高清，sd:标清	String	"yh,fhd,hd,sd"
resolutionDefault	仅支持hls流	String	"hd"
video-url	视频地址	String	-
has-audio	是否渲染音频（音频有问题,请设置成false）仅支持flv	Boolean	true
video-title	视频右上角显示的标题	String	-
recordMaxFileSize	录像文件大小(MB)	Number	200

事件回调

方法名	说明	参数
play	播放事件
pause	暂时事件
error	播放异常
ended	播放结束或直播断流
timeupdate	当前播放时间回调	currentTime

Vue方法

方法名	说明	参数
initPlayer	初始化播放器
destroyPlayer	销毁播放器
switchVideo	播放开关
switchAudio	静音开关
fullscreen	全屏
exitFullscreen	退出全屏
changeStretch	视频拉伸模式
snapshot	保存快照
switchRecording	录像开关

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

音频 渲染 vue3 事件 视频

0 人点赞