vue + element ui实现播放器功能以及动态传递url导致无法播放的坑

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`

那代码就会报错，因为require是无法动态打包的