Slick.js ve html5 Video autoplay ve video

Question

duraklar oynamak ve kullanıcı etkileşimi olmadan bir videoyu duraklatmak için, html5 kendini barındırılan videolar ile slick.js kullanmak mümkün mü?

Şu anda dikey bir kaygan slayt ve büyük resim ve video görünür ve otomatik kayar bir ana bölümü ile ikili bir kaydırıcı olması aşağıdaki kodu var. Bu, bir televizyonda barındırılacak, böylece kullanıcı etkileşimi olmayacak.

WelcomeTV Screen Site

nasıl göründüğü tamamen bir kez video oynatımını içeren slayt var ve bitince, slayt devam süresiz tekrarlayabilirsiniz. Videolar çeşitli uzunluklarda olabilir, bu nedenle uzunluğun dinamik olarak algılanması gerekir.

benim örnek çalışma almak mümkün değildi ancak this question üzerine kodunu uygulama çalıştı.

<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

Answer 1

Evet bu JavaScript kullanarak yapılabilir.

1. duraklama kaydırıcı
2. Sen slick.js olayı afterChange kullanarak yapabilirsiniz

videoyu oynatmak:

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

Video slayt olduğunda
currentSlide yapmanız gerekenler

Kaydırıcıyı co olarak sipariş etmek için videonun ne zaman biteceği konusunda bir etkinlik dinleyicisi eklemeniz gerekecektir. ntinue. Böyle yapabilirsiniz: Bu konuda sorun yaşıyorsanız

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

, bir JSFiddle ekleyin ve size orada yardımcı çalışacağım.

Düzenleme: Burada yardım için çalışan bir 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>