vue+elementui实现列表弹框播放视频
实现的效果图
实现的播放效果
实现的代码如下
<el-table-column
v-if="formName !== '在线表格'"
align="center"
fixed="right"
label="实时监控"
class-name="operate-col"
width="70">
<template #default="scope">
<div
class="chat-tipOne"
@click="playVideo(require('../../assets/images/runtime/crm_monitoring.mp4'))"
title="实时监控"
></div>
</template>
</el-table-column>
data中
dialogPlay: false,
videoUrl: '',
methods中
playVideo (url) {
this.videoUrl = url;
this.dialogPlay = true;
},
closeDialog () {
this.videoUrl = '';
},
这样的话就可以实现在浏览器中点击图片进行播放视频了
遇到的坑：
如果动态单纯传递url的话，会导致视频无法播放代码如下
playVideo('../../assets/images/runtime/crm_monitoring.mp4')
故因此要使用require这个属性让其找到图片或视频
而require属性不能通过预加载
所以只能通过require直接写死url，而不是动态复制如：
var imgUrl = "../../assets/images/runtime/crm_monitoring.mp4";
let img = require(imgUrl);
或
require(`../../assets/images/${showAllExpended?'unfold':'up'}.mp4`文章来源：https://www.toymoban.com/news/detail-451074.html
那代码就会报错，因为require是无法动态打包的文章来源地址https://www.toymoban.com/news/detail-451074.html
到了这里，关于vue + element ui实现播放器功能以及动态传递url导致无法播放的坑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
