wake-up-neo.com

Karussellschieber mit YouTube-Videos

Ist es möglich, mit JQuery einen YouTube-Video-Slider zu erstellen? Ich möchte einige davon anzeigen, die ich hochgeladen habe.

Einige Antworten gefunden, aber mit spezifischen Frameworks erstellt. Wenn es möglich ist, möchte ich mich an etwas Einfaches halten.

Ich fand diesen Code sehr hilfreich, aber ich kann ihn scheinbar nicht zum Laufen bringen.

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

Der Schieberegler scheint gut zu funktionieren. Ändern Sie einfach den Code vom Video-Tag in YouTube-Einbettungscode und Sie haben ein Youtube-Player-Karussell.

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

Sie können den YouTube-Einbettungscode abrufen, indem Sie mit der rechten Maustaste auf das Video auf youtube.com klicken, Einbettungscode kopieren auswählen und diesen Code im Schieberegler verwenden.

Ich hoffe es hilft.

Ich habe eine Gabelung des Autors gefummelt und die Änderungen vorgenommen. JSFiddle

1
Satpal Tanan

Dies können Sie mit der YouTube iFrame-API erreichen:

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

Diese API wird verfügbar, wenn Sie enablejsapi=1 An die URLs von YouTube-Videoeinbetten anhängen.

Um auf die Steuerelemente zum Stoppen von Videos zuzugreifen, müssen Sie für jedes Video auf eine Instanz von YT.Player Zugreifen. Für jeden iFrame habe ich eine Instanz von YT.Player Erstellt und als Parameter namens slide direkt an das video -Objekt angehängt.

(Beachten Sie, dass viele Entwickler sagen, Sie sollten Daten nicht direkt an DOM-Objekte anhängen, aber ich habe dies hier getan, weil ich dadurch Ihren ursprünglichen Code genauer kennenlernen konnte.)

Auf YT.Player Kann über eine spezielle Funktion zugegriffen werden, die onYouTubeIframeAPIReady aufgerufen werden muss. Diese Funktion könnte ich nur verwenden, wenn sie außerhalb von $(document).ready wäre. .

Ich kann meine Lösung nicht auf JSFiddle setzen, da die iFrames nicht unter Nice laufen. Deshalb hier meine Implementierung auf GitHub:

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

Hier sind die relevanten Bits:

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