Карусель слайдер с видео YouTube - PullRequest
Новая
       8

Карусель слайдер с видео YouTube

0 голосов
/ 27 ноября 2018

Можно ли использовать JQuery для создания видео слайдера YouTube?Я хотел бы показать несколько из них, которые я загрузил.

Нашел несколько ответов, но сделал их с помощью конкретных фреймворков, если это возможно, я бы хотел придерживаться чего-то простого.

Я нашел этот кодочень полезно, но я не могу заставить его работать.

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

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Этого можно добиться с помощью API iFrame YouTube:

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

Этот API-интерфейс становится доступным, когда вы добавляете enablejsapi=1 к URL-адресам вставок видео YouTube.

Чтобы получить доступ к элементам управления для остановки видео, для каждого видео необходимо получить доступ к экземпляру YT.Player.Для каждого iFrame я создал экземпляр YT.Player и прикрепил его непосредственно к объекту slide в качестве параметра с именем video.

(обратите внимание, что многие разработчики говорят, что вы не должны прикреплять данные напрямуюдля объектов DOM, но я сделал это здесь, потому что это позволило мне более точно соответствовать вашему исходному коду.)

YT.Player можно получить через специальную функцию, которая должна называться onYouTubeIframeAPIReady, которую я мог толькоприступить к работе, если он был вне из $(document).ready.

Я не могу поместить свое решение в JSFiddle, потому что iFrames не играют хорошо, поэтому вот моя реализация на GitHub:

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

Вот соответствующие биты:

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)
    })
}
0 голосов
/ 04 декабря 2018

Слайдер, кажется, работает нормально.Просто измените код с тега «Видео» на «Код для вставки YouTube», и у вас появится карусель плеера 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>

Чтобы получить код для вставки YouTube, щелкните правой кнопкой мыши видео на youtube.com и выберите «Копировать код для вставки».и используйте этот код в слайдере.

Надеюсь, это поможет.

Я сделал форк авторской скрипки и внес изменения. JSFiddle

...