2015-07-20 278 views
8

是否可以在html5自带视频中使用slick.js来播放和暂停视频而无需用户交互?Slick.js和html5视频在视频上自动播放和暂停

我目前有以下代码有一个垂直滑动幻灯片的双滑块和主要部分,大图像和视频将出现并自动滚动。这将在电视上托管,因此不会有用户交互。

WelcomeTV Screen Site

我怎么能有一个包含完全一旦它出现视频播放幻灯片,一旦它完成,继续幻灯片和无限重复。视频可能包含各种长度,因此需要动态检测长度。

我试着在this question上实现代码,但是我无法让我的例子工作。

<div id="slideBox"> 
    <!--Sidebar--> 
    <div class="sliderSidebar"> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100"></div> 
     <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div> 
    </div> 

    <div id="main-image" class="sliderMain"> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div><img src="http://placehold.it/900x500"></div> 
     <div id="slide-video"> 
      <video autoplay loop width="900px"> 
       <source src="video/SampleVideo.mp4" /> 
      </video> 
     </div> 
    </div> 

    <script type="text/javascript"> 

    $(document).ready(function(){ 
     $('.sliderMain').slick({ 
      slidesToShow: 1, 
      slidesToScroll: 1, 
      arrows: false, 
      fade: true, 
      asNavFor: '.sliderSidebar', 
      autoplay: true, 
      autoplaySpeed: 3000, 
      onAfterChange : function() { 
       player.stopVideo(); 
      } 
     }); 
     $('.sliderSidebar').slick({ 
      slidesToShow: 5, 
      slidesToScroll: 1, 
      asNavFor: '.sliderMain', 
      dots: false, 
      centerMode: false, 
      focusOnSelect: true, 
      vertical: true, 
      arrows: false 
     }); 
     var video = $('.sliderMain .slick-active').find('video').get(0).play(); 

     $('.sliderMain').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
     $('.sliderMain .slick-slide').find('video').get(0).pause(); 
     var video = $('.sliderMain .slick-active').find('video').get(0).play(); 
     }); 
    }); 
</script> 

Demo

回答

14

是的,它可以使用JavaScript来完成。
当视频幻灯片成为currentSlide您需要:

  1. 暂停滑块
  2. 播放视频

您可以使用slick.js事件afterChange做到这一点:

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

您还需要添加一个事件侦听器,以便视频结束时间,以便将滑块排序ntinue。你可以这样做:

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

如果你有这个问题,请添加一个JSFiddle,我会尽力帮你。

编辑:这里的工作JSFiddle

$(document).ready(function() { 
 
    $('.sliderMain').slick({ 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    arrows: false, 
 
    fade: true, 
 
    asNavFor: '.sliderSidebar', 
 
    autoplay: true, 
 
    autoplaySpeed: 3000 
 
    }); 
 
    $('.sliderSidebar').slick({ 
 
    slidesToShow: 5, 
 
    slidesToScroll: 1, 
 
    asNavFor: '.sliderMain', 
 
    dots: false, 
 
    centerMode: false, 
 
    focusOnSelect: true, 
 
    vertical: true, 
 
    arrows: false 
 
    }); 
 
    $('.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'); 
 
    } 
 
});
#slideBox { 
 
    width: 1300px; 
 
    max-height: 500px; 
 
    overflow: hidden; 
 
    margin: 1% auto; 
 
    position: relative; 
 
    top: 1em; 
 
    background-color: #54585A; 
 
    border-radius: .3em; 
 
} 
 
video { 
 
    background-color: black; 
 
} 
 
#slideBox .slick-vertical .slick-slide { 
 
    border: none; 
 
} 
 
.sliderSidebar { 
 
    width: 200px; 
 
    height: 500px; 
 
    float: left; 
 
} 
 
#slideBox .slick-vertical .slick-slide { 
 
    border: none; 
 
} 
 
.sliderMain { 
 
    width: 900px; 
 
    height: 500px; 
 
    position: relative; 
 
    float: left; 
 
}
<div id="slideBox"> 
 
    <!--Sidebar--> 
 
    <div class="sliderSidebar"> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100"></div> 
 
    <div><img src="http://placehold.it/200x100/C8102E/FFFFFFF?text=Video" /></div> 
 
    </div> 
 

 
    <div id="main-image" class="sliderMain"> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div><img src="http://placehold.it/900x500"></div> 
 
    <div id="slide-video"> 
 
     <video width="900px" id="theVideo"> 
 
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> 
 
     </video> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>

+0

感谢您的帮助。我把这个小提琴放在一起。 [链接](https://jsfiddle.net/38oj9xrd/) 我试图实现你的代码,并跑进一个反复出现的问题,我得到这个消息: 遗漏的类型错误:$(...)戏不是功能 –

+0

修复了一下代码+添加了我自己的工作JSFiddle –

+0

非常感谢!这为我节省了很多头痛。相同/类似的解决方案是否适用于Youtube和Vimeo,还是我需要参考他们的API? –