Slick.js und html5 video autoplay und pause auf video

Question

Ist es möglich, slick.js mit html5 selbst gehosteten Videos zu verwenden, um ein Video ohne Benutzerinteraktion abzuspielen und anzuhalten?

Ich habe derzeit den folgenden Code, um einen Dual-Slider mit einer vertikalen slick-Diashow und einen Hauptbereich, wo das große Bild und Video angezeigt werden und automatisch scrollen. Dies wird auf einem Fernseher gehostet, so dass keine Benutzerinteraktion stattfindet.

WelcomeTV Screen Site

Wie kann ich die Folie Video-Wiedergabe enthält, vollständig, sobald es erscheint, und sobald es fertig ist, um die Diashow fortzusetzen und auf unbestimmte Zeit wiederholen. Die Videos können verschiedene Längen enthalten, sodass die Länge dynamisch ermittelt werden muss.

Ich habe versucht, den Code auf this question implementieren, aber ich konnte nicht mein Beispiel arbeiten.

<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

Ja, es kann getan werden, mit Hilfe von JavaScript.
Wenn der Video-Folie die currentSlide Sie wird müssen:

1. Pause der Schieber
2. die
Video spielen

du das slick.js Ereignis mit tun können afterChange:

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

Sie müssen auch einen Ereignis-Listener für den Zeitpunkt hinzufügen, an dem das Video endet, um den Schieberegler auf co zu setzen weiter. Sie können wie folgt vorgehen:

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

Wenn Sie Probleme mit diesem haben sind, fügen Sie bitte ein JSFiddle und ich werde Sie versuchen, dort zu helfen.

Edit: hier ein Arbeits 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>