vue+elementUI轮播视频

轮播时自动暂停/继续播放

elementUI

vue

new Vue({
    el: '#app',
    data: {
        video: [
            { url: 'https://www.runoob.com/try/demo_source/movie.mp4', auto: true },
            { url: './mp4.mp4', auto: false },
            { url: 'https://www.runoob.com/try/demo_source/movie.mp4', auto: false },
            { url: './mp4.mp4', auto: false },
        ],
    },
    methods: {
        async carouselChange(val) {
            await this.video.forEach((item, index) => {
                if (val == index) document.getElementsByTagName('video')[index].play()
                else document.getElementsByTagName('video')[index].pause()
            })
        },
    },
})

video对象方法参考

HTML DOM Video 对象 | 菜鸟教程

video的常用标签属性、对象方法和对象属性的介绍_imagpie的博客-CSDN博客_video标签属性

https://www.jb51.net/article/179511.htm