带有YouTube视频的Carousel Slider

Question

是否可以使用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);

Answer 1

您可以使用 YouTube iFrame API 实现这一点：

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

当您附加enablejsapi=1到 YouTube 视频嵌入的 URL时，此 API 变得可用。

为了访问停止视频的控件，对于每个视频，您需要访问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)
    })
}