vue中使用h5 video标签实现弹窗播放本地视频的方法

// 父组件中引用子组件
<video-modal :visible.sync="showVideoModal">

// 子组件中
<el-dialog :visible="visible" @close="closeModal">

// 子组件中关闭弹窗方法
closeModal() {
    this.$emit("updata:visible", false);
}

<div v-if="showVideoModal">
    <video-modal :visible.sync="showVideoModal">
</div>

<video
    ref="video"
    class="play-video"
    controls="controls"
    autoplay="autoplay"
>
    <source :src="require('@/assets/videos/' + videoName + '.mp4')" type="video/mp4" />
</video>

computed: {
    src() {
        // 需要在js部分用计算属性定义
        return process.env.BASE_URL + "videos/" + this.videoName + ".mp4";
    }
},

mounted() {
    this.$nextTick(() => {
        // 播放完毕自动关闭弹窗
        const eleVideo = document.querySelector(".play-video");
        eleVideo.addEventListener("ended", () => {
            this.closeVideoModal();
        }, false);
    });
},

<template>
    <el-dialog class="video-dialog" :visible="visible" :title="title" width="75%" append-to-body @close="closeVideoModal">
        <video
            ref="video"
            class="play-video"
            controls="controls"
            autoplay="autoplay"
        >
            <source :src="src" type="video/mp4" />
        </video>
    </el-dialog>
</template>

<script>
export default {
    name: "VideoModal",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        // 父组件传参弹窗标题
        title: {
            type: String,
            default: ""
        },
        // 父组件传参要播放的视频名称
        videoName: {
            type: String,
            default: ""
        }
    },
    computed: {
        src() {
            return process.env.BASE_URL + "videos/" + this.videoName + ".mp4";
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 播放完毕自动关闭弹窗
            const eleVideo = document.querySelector(".play-video");
            eleVideo.addEventListener("ended", () => {
                this.closeVideoModal();
            }, false);
        });
    },
    methods: {
        closeVideoModal() {
            this.$emit("update:visible", false);
        }
    }
};
</script>

<style lang="scss" scoped>
.play-video {
    object-fit: contain;
    width: 100%;
    height: 99.5%;
}
</style>