时间戳

首页 > 解决方案 > 滑动滑块仅在更改一次后播放 HTML5 视频

jquery - 滑动滑块仅在更改一次后播放 HTML5 视频

问题描述

我有一个带有图像和 HTML5 视频的非自动播放光滑滑块。如果当前幻灯片是视频，我的目标是播放视频。

如果用户滑动到下一张幻灯片，则应暂停当前播放的视频。

如果下一张幻灯片是视频，则该视频应开始播放。

我的以下代码有效，但仅适用于滑块中的第一个视频。以下所有视频似乎都忽略了播放功能，即使控制台日志是正确的。

    //  PLAY IF FIRST SLIDE IS VIDEO
    $('.bs-swiper').on('init', function(event, slick){
        if ($('.slick-current .bs-item figure').hasClass('bs-video')) {
            $('video.bs-media')[0].play();
            console.log('play if first slide is a video!');
        }
    });

    //  PLAY/PAUSE IF VIDEO
    $('.bs-swiper').on('afterChange', function(event, slick, currentSlide, nextSlide){
        if ($('.slick-current .bs-item figure').hasClass('bs-video')) {
            $('video.bs-media')[0].play();
            console.log('play this video slide!');
        }
    });

    $('.bs-swiper').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        if ($('.slick-current .bs-item figure').hasClass('bs-video')) {
            $('video.bs-media')[0].pause();
            console.log('pause this video slide!');
        }
    });

由于我不是 javascript-pro，如果有人可以帮助调整我的代码，那就太好了，所以如果滑块中的每个视频元素都是当前幻灯片，它就会被播放。现在，只播放滑块中的第一个视频。即使控制台日志正确触发，滑块中的所有其他视频也不会开始。

非常感谢您提前提供的帮助！

标签： jqueryvideoslick.jsplaybackpause

解决方案

我意识到我还必须像这样将“.slick-current”类添加到视频对象中 $('.slick-current video.bs-media')[0].play(); - 现在所有视频幻灯片在“可见”时开始播放，不在时暂停。呜呼！

推荐阅读