web-dev-qa-db-fra.com

Curseur de carrousel avec vidéos YouTube

Est-il possible d'utiliser JQuery pour créer un curseur vidéo YouTube? Je voudrais en afficher quelques-unes que j'ai téléchargées.

J'ai trouvé quelques réponses mais faites avec des cadres spécifiques, si c'est possible, je voudrais m'en tenir à quelque chose de simple.

J'ai trouvé ce code très utile mais je n'arrive pas à le faire fonctionner.

JSFiddle

$('.play-button').on('click', function () {
    $(this).hide();
    $(this).parent().fadeOut();
    $(this).parent().siblings('.slider-video')[0].play();
});

$('.slider-video').on('play', function () {
    $(this).attr('controls', '1');
});

// Additionnal code for the slider
var pos = 0,
    slides = $('.slide'),
    numOfSlides = slides.length;

function nextSlide(){
    stopCurrentVideo();
    slides.eq(pos).animate({left:'-100%'},500);
    pos = pos >= numOfSlides-1 ? 0 : ++pos;
    slides.eq(pos).css({left:'100%'}).animate({left:0},500);
}

function previousSlide(){
    stopCurrentVideo();
    slides.eq(pos).animate({left:'100%'},500);
    pos = pos == 0 ? numOfSlides-1 : --pos;
    slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
}

function stopCurrentVideo(){
    $('.slider-video:eq('+pos+')').load().removeAttr('controls')
    .siblings('.overlay-content').show().find('.play-button').show();
}

$('.left').click(previousSlide);
$('.right').click(nextSlide);
javascriptjqueryyoutubeslidercarousel
9
Mar

Le curseur semble bien fonctionner. Changez simplement le code de balise vidéo en code d'intégration YouTube et vous avez un carrousel de lecteur Youtube.

<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
    <div style="position:relative;height:0;padding-bottom:56.28%"><iframe src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
    <div style="position:relative;height:0;padding-bottom:56.28%"><iframe src="https://www.youtube.com/embed/EngW7tLk6R8?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
<!-- END OF SLIDES -->
<div class="slide-arrow left"></div>
<div class="slide-arrow right"></div>
</div>

Vous pouvez obtenir le code d'intégration YouTube en cliquant avec le bouton droit sur la vidéo sur youtube.com et en sélectionnant Copier le code d'intégration, puis utilisez ce code dans le curseur.

J'espère que ça aide.

J'ai fait une fourchette de l'auteur violon et fait les changements. JSFiddle

1
Satpal Tanan

Vous pouvez y parvenir avec l'API YouTube iFrame:

https://developers.google.com/youtube/iframe_api_reference

Cette API devient disponible lorsque vous ajoutez enablejsapi=1 Aux URL des intégrations de vidéos YouTube.

Afin d'accéder aux commandes d'arrêt des vidéos, pour chaque vidéo, vous devez accéder à une instance de YT.Player. Pour chaque iFrame, j'ai créé une instance de YT.Player Et l'ai attachée directement à l'objet slide en tant que paramètre appelé video.

(Notez que de nombreux développeurs disent que vous ne devez pas attacher de données directement aux objets DOM, mais je l'ai fait ici car cela m'a permis de faire correspondre plus étroitement votre code d'origine.)

YT.Player Est accessible via une fonction spéciale qui doit être appelée onYouTubeIframeAPIReady, que je ne pourrais travailler que si c'était à l'extérieur de $(document).ready.

Je ne peux pas mettre ma solution sur JSFiddle parce que les iFrames ne jouent pas Nice, alors voici mon implémentation sur GitHub:

http://robertakarobin.github.io/jquery-video-sliderhttps://github.com/robertakarobin/jquery-video-slider

Voici les bits pertinents:

HTML: 

<div class="video-slider">
    <!-- SLIDE 1 -->
    <div class="slide">
        <iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
    </div>
    <!-- SLIDE 2 -->
    <div class="slide">
        <iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
    </div>
    <!-- END OF SLIDES -->
    <div class="slide-arrow left"></div>
    <div class="slide-arrow right"></div>
</div>

JavaScript: 

$(document).ready(function () {
    var pos = 0,
        slides = $('.slide'),
        numOfSlides = slides.length;

    function nextSlide() {
        // `[]` returns a Vanilla DOM object from a jQuery object/collection
        slides[pos].video.stopVideo()
        slides.eq(pos).animate({ left: '-100%' }, 500);
        pos = (pos >= numOfSlides - 1 ? 0 : ++pos);
        slides.eq(pos).css({ left: '100%' }).animate({ left: 0 }, 500);
    }

    function previousSlide() {
        slides[pos].video.stopVideo()
        slides.eq(pos).animate({ left: '100%' }, 500);
        pos = (pos == 0 ? numOfSlides - 1 : --pos);
        slides.eq(pos).css({ left: '-100%' }).animate({ left: 0 }, 500);
    }

    $('.left').click(previousSlide);
    $('.right').click(nextSlide);
})

function onYouTubeIframeAPIReady() {
    $('.slide').each(function (index, slide) {
        // Get the `.video` element inside each `.slide`
        var iframe = $(slide).find('.video')[0]
        // Create a new YT.Player from the iFrame, and store it on the `.slide` DOM object
        slide.video = new YT.Player(iframe)
    })
}
1
RobertAKARobin