vue中怎么使用h5 video标签实现弹窗播放本地视频

这篇“vue中怎么使用h5 video标签实现弹窗播放本地视频”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中怎么使用h5 video标签实现弹窗播放本地视频”文章吧。

1.弹窗的打开关闭

父组件中使用.sync绑定visible属性，可直接在子组件中关闭弹窗更新父组件传入的visible值；

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

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

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

不过这样使用会导致每次重新打开视频弹窗进度条都会留在上一次打开的位置，所以需要在引用子组件外再嵌套一个div，利用v-if使其每次打开都重新渲染，从而解决进度条缓存的问题；

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

2. 本地视频资源路径的引入

需要播放的视频是项目中的静态资源，由于弹窗组件需要支持可复用，所以视频路径不可写死，下面示例为视频名称自定义；

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

如果视频不在src目录下，而是public目录下则写法略有不同；

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

3. 视频播放完毕自动关闭弹窗

监听video标签的ended事件并关闭弹窗即可，vue生命周期中定义需要增加this.$nextTick，否则无法获取对应的dom元素；

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

4. 视频在弹窗中自适应大小

给video标签设置合适的宽高，在利用object-fit: contain;属性即可。

最后附上完整代码

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

以上就是关于“vue中怎么使用h5 video标签实现弹窗播放本地视频”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。