Vue：加载本地视频

封装视频弹框

<template><el-dialog class="videoBox" :title="title" :visible.sync="visible" width="40%" :before-close="handleOnClose" :close-on-click-modal="false" :close-on-press-escape="false"><video id="video" controls preload autoplay="autoplay" style="width: 100%"><source :src="videoUrl" type="video/mp4"></video></el-dialog>
</template>
<script>export default {name: 'videoData',data() {return {// 标题title: null,// 是否显示弹框visible: false,// 视频地址videoUrl: null}},methods: {/*** 初始化视频*/initVideo(){this.$nextTick(() => {let myVideo = document.getElementById('video')myVideo.pause()myVideo.load()});},/*** 取消*/handleOnClose() {this.videoUrl = nullthis.visible = false},}
}
</script>
<style>
.videoBox .el-dialog__header {background-color: #000000;
}
.videoBox .el-dialog__header .el-dialog__title {color: #fff;
}
.videoBox .el-dialog__body {padding: 0 !important;
}
</style>

调用视频组件

/*** 视频查看* @param row*/
handleVideo(row){this.$refs.videoData.title = '视频详情'this.$refs.videoData.visible = truethis.$refs.videoData.videoUrl = row.wzsp + '?t=' + new Date().valueOf()this.$refs.videoData.initVideo()
},