Question

我正在为我的项目使用idangero.us Swiper滑块。我在滑块中有3个html5视频，但它们都在同时播放。我点击下一步时需要暂停视频，并在可见时再次播放。

HTML：

var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: 5000,
});

JS：

let postref = fire.database().ref('users/').orderByKey().limitToLast(100);
    postref.on('child_added', snapshot => {
        snapshot.forEach(childsnapshot => {
            let author = snapshot.key;
            childsnapshot.forEach(result => {
                let finaly = {text: result.val(), key: result.key , author: toString(author)}
                this.setState({posts: [finaly].concat(this.state.posts)})
            })
        })
    })

    postref.on('child_changed', snapshot => {
        snapshot.forEach(childsnapshot => {
            let author = snapshot.key;
            childsnapshot.forEach(result => {
                let finaly = {text: result.val(), key: result.key , author: toString(author)  }
                this.setState({posts: [finaly].concat(this.state.posts)})
            })
        })
    })

Answer 1

只需确保您的视频具有 d3-vid 类（您也可以更改脚本）。这适用于 HTML5 视频和嵌入式视频。有点黑客，因为它只是重置 src 但嘿它工作得很好。这样做：

var radSwiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: 5000,
});
radSwiper.on('slideChange', function () {
    document.querySelectorAll('.d3-vid').forEach(iframe => {
        iframe.setAttribute('src', iframe.getAttribute('src'));
    });
    document.querySelectorAll('.d3-vid').forEach(video => {
        video.setAttribute('src', video.getAttribute('src'));
    });
});

我不知道为什么人们必须如此不同哈哈。

Answer 2

你可以试试这个

var sliderVideos = $(".swiper-slide video");
swiper.on('slideChange', function () {
   sliderVideos.each(function( index ) {
    this.currentTime = 0;
    this.pause();
   });
});

Swiper滑块，在滑动时暂停html5视频

2 个答案: