Fiddle Here

是否可以使用JavaScript暂停包含视频的幻灯片,以便该视频在特定幻灯片#N上播放至完整,而不是应用于包含<video>的任何幻灯片?

对于此示例,当前我有以下代码可以在幻灯片到达#5时暂停它:

            $('.sliderMain').on('afterChange', function(event, slick, currentSlide){
          if (currentSlide == 5) {
          $('.sliderMain').slick('slickPause');
          theVideo.play();


视频播放完毕后,以下代码可恢复幻灯片的播放:

document.getElementById('theVideo').addEventListener('ended',myHandler,false);
                function myHandler(e) {
                 $('.sliderMain').slick('slickPlay');
                }
            }
            });


我想做的是在滑块中包含更多视频,并让滑块在每个视频播放器处暂停播放,而不是像在此处那样仅在特定的幻灯片上播放:

if (currentSlide == 5) {


幻灯片6有视频,但是没有包含在上面的代码中。我宁愿让代码检测幻灯片是否具有视频类。
这是this question.的延续

最佳答案

代替

if (currentSlide == 5)


您可以在每张幻灯片上添加一个递增的类,并检查其中是否包含内容。
html看起来像这样:

            <div class="slide1"><img src="http://placehold.it/900x500"></div>
        <div class="slide2"><img src="http://placehold.it/900x500"></div>
        <div class="slide3"><img src="http://placehold.it/900x500"></div>
        <div class="slide4"><img src="http://placehold.it/900x500"></div>
        <div class="slide5"><img src="http://placehold.it/900x500"></div>

        <div class="slide6" id="slide-video">
            <video width="900px" height="500px" class="theVideo">
                <source src="http://vjs.zencdn.net/v/oceans.mp4" />
            </video>


例如,您将做:

            $('.sliderMain').on('afterChange', function(event, slick, currentSlide){
          if ($('.slide'+currentSlide+ ' video').length != 0){
            $('.sliderMain').slick('slickPause');
            theVideo.play();
          }
        });


然后,您可能会知道当前幻灯片中是否有节点视频。

希望这会有所帮助

关于javascript - 动态地将Javascript应用于slick.js Slider中的视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31539311/

10-11 23:23
查看更多