滑动滑块，滑动时暂停 html5 视频答案

【问题标题】：Swiper slider, pause html5 video when it's slide滑动滑块，滑动时暂停 html5 视频
【发布时间】：2017-08-17 23:49:56
【问题描述】：

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

HTML：

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <video preload="auto" loop="" autoplay="">
                    <source src=".../>
                </video>
            </div>              
            <div class="swiper-slide">
                <video preload="auto" loop="" autoplay="">
                    <source src=".../>
                </video>
            </div>              
        </div>
    </div>

JS：

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

【问题讨论】：

欢迎来到 Stack Overflow。 SO 不是一个让别人为你编码的地方。但如果你的代码有问题，你应该发布。
欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便它在minimal, complete, and verifiable example 中显示您的相关代码 - 没有看到它很难解决问题。如果您能告诉我们您迄今为止为解决问题所做的尝试，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)

标签： javascript video slider html5-video

【解决方案1】：

你可以试试这个

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

【讨论】：

【解决方案2】：

只需确保您的视频具有 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'));
    });
});

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

【讨论】：

我应该说这会倒带视频并且不会暂停视频。