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

// 父组件中引用子组件


// 子组件中

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

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

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

如果视频不在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;属性即可。

最后附上完整代码

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