J'ai un slick.js curseur qui contient de la vidéo et je veux que le curseur s'arrête une fois qu'il a atteint une vidéo faites glisser et reprenez le cycle une fois la vidéo terminée sans intervention de l'utilisateur. Je peux faire fonctionner cette fonctionnalité avec la première vidéo d'un cycle, mais sur la deuxième diapositive vidéo, le curseur ne reprendra pas une fois la vidéo terminée.

Violon

J'ai un journal de console qui écrit à la fin de la vidéo, mais il ne dira rien une fois la deuxième vidéo terminée. Je crois qu'il ne voit pas la fonction pour jouer au slick slider.

            function myHandler(e) {         
            console.log('Video Complete')
            $('.sliderMain').slick('slickPlay');
        }
5
Matthew Johnson 21 juil. 2015 à 21:07

3 réponses

Meilleure réponse

Vous ne liez que la première balise video à votre fonction myHandler:

// It only gets the first element
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended',myHandler,false);

Puisque vous utilisez jQuery, vous pouvez lier un événement lorsque les vidéos se sont terminées comme ça:

$('video').on('ended',function(){           
    console.log('Video Complete')
    $('.sliderMain').slick('slickPlay');
});

Démo jQuery

L'équivalent JavaScript serait le suivant:

var videos = document.getElementsByTagName('video');

for (var i=0; i<videos.length; i++) {
    videos[i].addEventListener('ended',myHandler,false);
}

Démo JavaScript

5
actaram 21 juil. 2015 à 18:58

Cela fonctionne également sur les appareils mobiles. Assurez-vous simplement que vous ne diffusez pas de balise vidéo sur mobile. Avant de sortir votre diapositive via un modèle PHP, vérifiez simplement l'agent utilisateur et servez plutôt une image de secours. Ensuite, utilisez ceci pour votre problème de vidéo / lecture automatique / reprise:

$('.homepage .hero-slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
        var $active = $('.slick-slide.slick-current.slick-active');
        var video = $active.find('video');
        if (video.length == 1) {
            var $slickInstance = $(this);
            // play() only works with a valid id as selector :)
            var video = document.getElementById(video.attr('id'));
            video.play();
            $slickInstance.slick('slickPause');
            video.addEventListener('ended', function () {
                $slickInstance.slick('slickPlay');
            }, false);

        }
    });
1
David Freimaucher 27 févr. 2019 à 12:59

SlickSlider est réactif et doit fonctionner à 360 ° (sur tous les appareils). Votre solution ne fonctionnera pas sur mobile, car la lecture automatique d'une vidéo est interdite.

De plus, cette solution permet la lecture simultanée de plusieurs vidéos, ce qui n'est pas optimal.

Une meilleure solution serait de suspendre le carrousel uniquement lorsque la vidéo est lue par l'utilisateur et de reprendre le carrousel (mettre la vidéo en pause) lorsqu'une diapositive est détectée.

2
Dominic Cerisano 20 août 2015 à 18:42