Wenn Sie kürzlich auf Medienwebseiten nach Video-Streaming-Diensten, Nachrichten-Websites, Facebook usw. gesucht haben, haben Sie möglicherweise einen Trend bei den Video-Playern festgestellt. Wenn Sie auf einer Seite, auf der ein Video vorhanden ist, nach unten scrollen, wird der Player verschoben und verkleinert. Er wird an die Seite des Ansichtsfensters gehängt, anstatt ihn aus der Ansicht zu verlieren.
Auf diese Weise behalten die Benutzer das Video im Auge und sehen gleichzeitig den anderen Inhalt. In diesem Tutorial zeige ich Ihnen, wie Sie die gleiche Erfahrung wiederherstellen können - also ohne weiteres, beginnen wir!
Beispiele
Wir sind alle auf derselben Seite, hier einige Beispiele aus der Wildnis:
Entertainment Weekly sendet seine Videos unten rechts im AnsichtsfensterCNN-Videos schweben nach rechts
YouTube-Video hinzufügen
Lassen Sie uns zunächst die Seitenmarkierung zusammen mit einem YouTube-Video erstellen. Entscheidend ist, dass wir das Video in die enablejsapi = 1 Parameter hinzugefügt; Dieser Parameter ermöglicht uns die Interaktion mit dem Video über die Youtube-Iframe-API.
Lorem ipsum dolor sitzen amet.
Lorem ipsum dolor sitzt amet, eine elitäre Frau. Tenetur, Minima!
Wie Sie sehen können, haben wir unten auf der Seite drei JavaScript-Dateien hinzugefügt. nämlich jQuery, das Skript, das uns die Youtube Iframe API zur Verfügung stellt, und das main.js Wo wir unser benutzerdefiniertes JavaScript schreiben.
Styling
Sie können die Seite beliebig gestalten, aber die Stile, die uns hier besonders betreffen, sind die, die an das YouTube-Video gebunden sind. Zuerst fügen wir die Stile hinzu, um das YouTube-Video ansprechbar zu machen. Diese Regeln werden letztendlich auch den Container aktivieren, .content-media - video, um das Seitenverhältnis beizubehalten, wenn das YouTube-Video neu positioniert wird.
Unsere nächsten CSS-Regeln definieren, wie das YouTube-Video verschoben werden soll. Wir benutzen einen Selektor .ist klebrig-, Diese werden wir dynamisch mit JavaScript zum Player hinzufügen, um das Video auf der Seite zu platzieren. Dadurch wird das Video auch verkleinert, nach links positioniert und für einige Ansichtsfenstergrößen angepasst.
Hinweis: Sie sollten diese Eigenschaften (Größe und Position) entsprechend Ihrer Zielgruppe und der Art Ihrer Website anpassen. Wenn der Inhalt Ihrer Website beispielsweise von rechts nach links geschrieben wird, kann dies Auswirkungen darauf haben, wo Sie Ihren Videoplayer am besten platzieren möchten.
Wenn wir nun diese Seite laden, sehen wir, dass das YouTube-Video zusammen mit einem beliebigen Inhalt angezeigt wird.
JavaScript schreiben
Wir sind zu dem aufregenden Teil dieses Tutorials gekommen. das JavaScript! Unsere main.js Dateiinhalt zu diesem Zeitpunkt ist wie folgt:
jQuery (Funktion ($) // Hier Code schreiben.);
Dieser obige Ausschnitt entspricht dem $ (Dokument) .ready (), Dadurch können Sie JavaScript ausführen, sobald alle Elemente auf der Seite analysiert wurden und verfügbar sind.
Als Nächstes definieren wir eine Reihe von Variablen. Ich habe der Seite jeder Variablen Inline-Kommentare hinzugefügt, um zu erklären, was los ist.
var $ window = $ (Fenster); // 1. Fensterobjekt. var $ featuredMedia = $ ("# featured-media"); // 1. Der Videocontainer. var $ featuredVideo = $ ("# featured-video"); // 2. Das Youtube-Video. var Spieler; // 3. Youtube Player Objekt. var top = $ featuredMedia.offset (). oben; // 4. Die Videoposition vom oberen Rand des Dokuments; var offset = Math.floor (top + ($ featuredMedia.outerHeight () / 2)); // 5. Versatz.
Youtube Iframe API
Wie bereits erwähnt, haben wir die JavaScript-Datei hinzugefügt, die den Zugriff auf die YouTube-Iframe-API ermöglicht. Sobald diese API geladen ist, wird eine Funktion mit dem Namen ausgelöst onYouTubeIframeAPIReady. Diese Funktion ist auf globaler Ebene verfügbar. Und da unser Skript unter der eingebettet ist jQuery (Funktion ($) );, Wir müssen diese Funktion in der Fenster Objekt wie folgt:
window.onYouTubeIframeAPIReady = function () player = new YT.Player ("Featured-Video", events: "onStateChange": onPlayerStateChange); ;
Wie Sie in der Funktion sehen können, haben wir das ID-Attribut von ausgewählt iframe sowie eine Funktion namens übergeben onPlayerStateChange. Diese Funktion wird ausgelöst, wenn der YouTube-Videoplayer abgespielt, angehalten oder beendet wird.
Das onPlayerStateChange übergibt ein Event-Objekt, das uns verwertbare Daten zur Verfügung stellt. In diesem Fall verwenden wir beispielsweise das Ereignis .Daten Objekt, um den Videostatus abzurufen.
Der Videostatus wird, wie Sie unten sehen können, mit einer Zahl dargestellt. 1 ist, wenn das Video abgespielt wird, 2 ist, wenn das Video angehalten ist und 3 ist, wenn das Video endet. Wir werden einen Klassennamen entsprechend hinzufügen und entfernen, wenn der Status geändert wird.
/ ** * Wird ausgeführt, wenn der Youtube-Video-Status (Wiedergabe, Pause usw.) geändert wird. * * @param Object event Das Youtube-Objektereignis. * @return Void * / function onPlayerStateChange (event) var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; if (isPlay) $ featuredVideo.removeClass ("is-paused"); $ featuredVideo.toggleClass ("wird abgespielt"); if (isPause) $ featuredVideo.removeClass ("wird abgespielt"); $ featuredVideo.toggleClass ("is-paused"); if (isEnd) $ featuredVideo.removeClass ("is-playing", "is-paused");
Das Video schweben und kleben
Was folgt, ist der Code, mit dem Sie unseren Videoplayer schwimmen und kleben. Es ist erwähnenswert, dass wir das Video nur während der Wiedergabe des Videos schweben lassen sollten. Deshalb überprüfen wir zuerst den iframe, um zu sehen, ob er das hat spielt Klasse vor dem Hinzufügen der ist klebrig Klasse:
Testen Sie, was Sie getan haben, und Sie sollten sehen, wie die Dinge funktionieren!
Letzte Demo
Fazit
Wir sind fertig! In diesem Lernprogramm möchten wir Ihnen den Einstieg erleichtern und Ihnen die Grundlagen vermitteln, wie Sie ein Video ähnlich wie auf Medienwebseiten, die Sie möglicherweise gesehen haben, verschieben. Wir haben jQuery verwendet, um den Code für Leser im Allgemeinen einfacher, kürzer und verständlicher zu machen.
In einem realen Projekt müssen Sie jedoch je nach Komplexität des Projekts wahrscheinlich Details hier und dort anpassen. Beispielsweise möchten Sie möglicherweise die Bildlauffunktion in einer Drosselungsfunktion ausführen, um Funktionsaufrufe zu reduzieren. Möglicherweise müssen Sie auch die Videoposition und -größe entsprechend dem Site-Layout auf einem mobilen Gerät usw. anpassen.
Schauen Sie sich doch die Demo an, spielen Sie das Video ab und scrollen Sie!
Share
Entertainment Weekly sendet seine Videos unten rechts im Ansichtsfenster
CNN-Videos schweben nach rechts
Accentsconagua
Letzte Demo