web-dev-qa-db-fra.com

Lecture automatique des vidéos Slick.js et html5 et pause sur la vidéo

Est-il possible d'utiliser slick.js avec des vidéos auto-hébergées html5, pour lire et mettre en pause une vidéo sans interaction avec l'utilisateur?

J'ai actuellement le code suivant pour avoir un double curseur avec un diaporama vertical et une section principale où la grande image et la vidéo apparaîtront et défileront automatiquement. Cela sera hébergé sur un téléviseur, il n'y aura donc aucune interaction avec l'utilisateur.

Site d'écran WelcomeTV

Comment puis-je faire jouer la diapositive contenant la vidéo complètement une fois qu'elle apparaît et une fois qu'elle est terminée, continuez le diaporama et répétez indéfiniment. Les vidéos peuvent contenir différentes longueurs, il devrait donc détecter la longueur de manière dynamique.

J'ai essayé d'implémenter le code sur cette question mais je n'ai pas réussi à faire fonctionner mon exemple.

    <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>

Démo

html5-videoslick.js
11
Matthew Johnson

Oui, cela peut être fait en utilisant JavaScript.
Lorsque la diapositive vidéo devient le currentSlide, vous devez:

  1. mettre le curseur en pause
  2. lire la vidéo

Vous pouvez le faire en utilisant l'événement slick.js afterChange:

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

Vous devrez également ajouter un écouteur d'événements pour la fin de la vidéo afin de permettre au curseur de continuer. Vous pouvez le faire comme ceci:

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

Si vous rencontrez des problèmes, veuillez ajouter un JSFiddle et je vais essayer de vous aider.

Edit: voici un travail 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>
17
Asaf David