带有 YouTube 视频的轮播滑块

Posted 2023-02-24

【中文标题】带有 YouTube 视频的轮播滑块

【英文标题】：Carousel Slider with YouTube videos

【发布时间】：2019-04-29 14:17:46

【问题描述】：

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

【问题讨论】：

你不能让它工作是什么意思？你尝试了什么？

【参考方案1】：

您可以使用 YouTube iFrame API 实现此目的：

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

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

为了访问停止视频的控件，您需要为每个视频访问YT.Player 的实例。对于每个 iFrame，我创建了一个 YT.Player 的实例，并将其作为名为 video 的参数直接附加到 slide 对象。

（请注意，许多开发人员说您不应该将数据直接附加到 DOM 对象，但我在这里这样做是因为它可以让我更接近地匹配您的原始代码。）

YT.Player 可以通过一个必须称为onYouTubeIframeAPIReady 的特殊函数来访问，如果它在$(document).ready 的外部，我才能开始工作。

我无法将我的解决方案放在 JSFiddle 上，因为 iFrame 效果不佳，所以这是我在 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)
    )

【参考方案2】：

滑块似乎工作正常。只需将代码从 Video 标签更改为 YouTube Embed Code，您就有了一个 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"   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"   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.com 上的视频并选择复制嵌入代码并在滑块中使用该代码来获取 YouTube 嵌入代码。

希望对你有帮助。

我已经制作了作者小提琴的一个分支并进行了更改。 JSFiddle

【讨论】：

这不起作用。 html 缺少结束标记，并且与作者编写的代码不兼容。点击时会出错并失败。

@RobertAKARobin 你能检查一下我创建的小提琴吗，它似乎可以工作。

滑动有效，但滑动时视频不会停止/暂停。