Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Erstellen Sie einen benutzerdefinierten HTML5-Videoplayer 

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Strange and Unusual HTML.
Introducing the HTML5 “datalist” Element
Quick Tip: Consider Wrapping Your Code With a “figure” Element

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Obwohl die Idee eines videospezifischen HTML-Elements vor gut zehn Jahren vorgeschlagen wurde, fangen wir gerade erst an, das zu realisieren!  Vergessen Sie all das "HTML5 2012"-Mumbo-Jumbo; die Wahrheit ist, dass Sie das video-Element in Ihren Projekten sofort benutzen können!  Sie müssen sich nur einer Handvoll Anforderungen bewusst sein, bevor Sie gedankenlos den Sprung wagen.


Was müssen wir vorne wissen 

  1. Aus gutem Grund empfiehlt die Spezifikation nicht, Vollbildunterstützung anzubieten.  Wie Sie sich vorstellen können, jetzt, wo das Video mit JavaScript alleine gesteuert werden kann, können wir uns sicherlich alle vorstellen, wie es missbraucht werden kann!  In diesem Zusammenhang bieten die Nachtfenster einiger Browser per Rechtsklick Vollbild-Video an.
  2. Wenn die Vollbildunterstützung derzeit eine Voraussetzung für Ihre Anforderungen ist, können Sie sich leider nicht darauf verlassen.  Stattdessen müssen Sie einen benutzerdefinierten Player verwenden oder erstellen, der diese Funktion bietet.
  3. Um zu erzwingen, dass Internet Explorer die verschiedenen neuen HTML5-Elemente erkennt, müssen wir ein einfaches Stück Tricks anwenden, wobei wir das Element mit JavaScript mit document.createElement('video') erstellen. Seltsamerweise scheint das das Bewusstsein von IE auszulösen.  Ja - es ist ziemlich merkwürdig, aber wir haben das vom Internet Explorer erwartet, oder?  Um diesen Prozess zu beschleunigen, hat Remy Sharp HTML5 Shiv entwickelt, das übrigens auch einige Druckprobleme bei der Arbeit mit HTML5-Elementen behebt.  Laden Sie das Skript einfach herunter und referenzieren Sie es im head-Bereich Ihrer Dokumente.
  4. Browser kommen nicht ganz zurecht, wenn es um die Art von Video geht, das sie unterstützen.  Zum Beispiel bevorzugt Firefox Video, das im ogg-Format codiert ist, während Webkit-Browser mp4-Videos rendern können.  In der Tat ist das eine übermäßige Vereinfachung; das wird jedoch vorerst geschehen.  Es genügt jedoch zu sagen, dass mehr Videotypen unterstützt werden, einschließlich Googles kürzlich Open-Source-V8-Codec.
  5. Wir können einen Flash-Player als Fallback-Unterstützung für ältere Browser anbieten; also fürchten Sie sich nie.  Bedenken Sie jedoch, dass Sie Ihr Video zumindest im Moment in mindestens zwei Formate konvertieren müssen.

Warum brauchen Sie einen benutzerdefinierten Player erstellen?

  1. Vollbild-Support: Aus eigener Erfahrung kann ich Ihnen sagen, dass das Problem mit dem Vollbild-Support ein Deal-Breaker ist.  Zum Beispiel kann ich als Redakteurin von Nettuts+ keine Code-Screencasts anbieten, die mit 600px angesehen werden müssen!  Aus diesem Grund ist der Aufbau eines benutzerdefinierten Players unerlässlich.
  2. Branding: Jeder Browser implementiert seinen eigenen Videoplayer, der sich geringfügig von seinen Gegenstücken unterscheidet.  Als Ergebnis des Aufbaus eines benutzerdefinierten Players können wir sicherstellen, dass die Grafik von Browser zu Browser konsistent ist ... und wir können den Player auch nach Herzenslust brandmarken/skinieren.  Als Beweis des Konzepts wird der Player dieses Tutorials das Tuts+-Logo verwenden.

Webkits Video Player


Mozillas Video Player


Unser Tuts+ Branded Custom Video Player (in allen Browsern)



Schritt 1: Das Videoelement

Wie bei jedem Projekt ist unser erster Schritt, den notwendigen Aufschlag für unser Projekt zu schaffen.

Zuerst finden Sie einige Beispielvideos, mit denen Sie arbeiten können.  Das quelloffene "Big Bunny Buck" Pixar-ähnliche Video ist das, was ich verwenden werde.  Ich bin mir sicher, dass Sie es mittlerweile im Internet gesehen haben.  Wenn Sie diese Markierung im Browser anzeigen, können Sie ein Fragezeichen über Ihrem Kopf hinterlassen.

Das rohe Videoelement


Ha? Das ist es?  Es sieht einfach wie ein Bild aus.  Was ist das Problem?  Nun, standardmäßig ist das alles, was wir angefordert haben.  Wir müssen dann angeben, ob die Steuerelemente angezeigt werden sollen, ein Poster angezeigt werden soll usw. Machen wir das jetzt; überarbeiten Sie Ihr video-Element wie folgt:

Auf Anhieb bemerken wir, dass es keine Zitate um die Attribute gibt.  Wie sich herausstellt, sind sie nicht notwendig.  Während es vor Jahren als schlechte Praxis angesehen wurde, sie auszuschließen, ist das nicht mehr der Fall.  An diesem Punkt kommt es nur auf persönliche Vorlieben an.  Also, wenn Sie sich wohler fühlen, wenn Sie sie hinzufügen, dann machen Sie das auf jeden Fall.

  • Steuerelemente: Fügt dem Player die standardmäßigen Steuerelemente für Wiedergabe/Pause hinzu
  • Breite: Die Breite des Spielers
  • preload: Weist den Browser an, das Laden des Videos beim Laden der Seite zu starten.  Denken Sie zweimal darüber nach, bevor Sie blind dieses Attribut hinzufügen.  Sie verwenden die Bandbreite des Betrachters, wenn Sie diese Funktion aktivieren.  Zweitens, zum Zeitpunkt des Schreibens hat noch kein Browser diese Funktionalität implementiert ... aber sie werden es tun.
  • Poster: Nicht vollständig über alle Browser implementiert, ermöglicht es Ihnen, ein Bild als Anfang des Videos festzulegen -- bevor es zu spielen beginnt.

Das Videoelement mit Attributen



Schritt 2: Benutzerdefinierte Steuerelemente

Wir verwenden offensichtlich nicht die Standardeinstellungen des Browsers.  Daher müssen wir unsere eigenen Kontrollen einführen.  Bevor wir fortfahren, haben Sie sich vielleicht selbst gefragt: "Was bringt es, das controls-Attribut überhaupt hinzuzufügen?  Die Antwort liegt darin, dass wir die Tatsache berücksichtigen und ausgleichen müssen, dass JavaScript auf dem Computer des Betrachters deaktiviert ist.  Hätten wir das controls-Attribut nicht hinzugefügt, würden sie nur das sehen, was wie ein Bild aussieht.

Bedenken Sie immer die Möglichkeit, dass JavaScript möglicherweise deaktiviert ist.

Das div mit einer ID von "videoControls" ist, wo wir die notwendigen Knöpfe und das Logo hinzufügen werden.  Ein raffinierter kleiner Trick ist die Verwendung von "& #x25BA;" um den Spielknopf zu erstellen.  Machen Sie sich keine Sorgen über den "Fortschritt" div; Wir werden diesen Abschnitt später in diesem Tutorial genauer betrachten.  Die kurze Antwort ist, dass das der Container für unseren Fortschrittsbalken ist.  Schließlich fügen wir button hinzu, die die Vollbildfunktion sowie das Tuts+-Logo umschaltet.

Zwei Control Sets auf einmal?


Machen Sie sich keine Sorgen; obwohl es scheint, dass wir jetzt einen zweiten Satz von Steuerelementen erstellt haben (und unsterblich sind), werden wir die Standardsteuerelemente eventuell mit JavaScript entfernen.  Nichtsdestotrotz sollte der obige Screenshot zu Ihrer eigenen Vorschau passen, wenn Sie mitlesen.


Schritt 3: Das JavaScript

Nachdem der Aufschlag abgeschlossen ist, können wir nun zum spaßigen Teil übergehen!  Erstellen Sie einen neuen Ordner namens "js" und fügen Sie eine neue Datei hinzu: videoPlayer.js.  Als nächstes wollen wir gute Jungs und Mädels sein und unseren Code in eine selbstaufrufende anonyme Funktion einbinden, um die Erzeugung unnötiger globaler Variablen zu verhindern.

Sie können die Argumente streichen, wenn Sie möchten, es ist eine kleine Verbesserung mit zwei Vorteilen:

  1. Indem wir this (das globale Window-Objekt) und dokument übergeben, verhindern wir, dass die JavaScript-Engine diese Objekte nach unten filtern und nachverfolgen muss.  Das kann ein großer Vorteil für größere Projekte sein, aber es bietet einen sehr kleinen Leistungsvorteil.
  2. Wenn Sie Ihr JavaScript minimieren, können window und dokument nun über etwas wie a und b dargestellt werden.

Als Nächstes sollten wir unseren Code so sauber wie möglich halten, indem wir ein videoPlayer-Objekt erstellen, das alle unsere Methoden enthält.  Wir erstellen auch eine init-Methode, die beim Laden der Seite sofort aufgerufen wird.

Da wir sicherlich Elemente auf der Seite manipulieren werden, gehen wir weiter und verweisen auf deren Position innerhalb von Variablen.  Bevor wir die Variable "videoPlayer" deklarieren, gehen wir vor:

Wenn Sie mitarbeiten (und ich hoffe, dass Sie es sind), nehmen Sie sich etwas Zeit, um genau zu erfahren, worauf diese Variablen verweisen.  Ziehen Sie gegebenenfalls auf Ihre Preisaufschläge zurück.  Wir greifen das Video-Element, das Video steuert div, die Play-Taste, die Vollbild-Shift-Taste und die drei Fortschrittsdivs.  Wir "cachen" den Ort dieser Elemente, weil es keinen Grund gibt, das DOM jedes Mal, wenn wir auf eines dieser Elemente zugreifen müssen, unnötig zu durchlaufen!

Die Init-Methode

Lassen Sie uns anfangen, etwas wirklichen Code zu schreiben.  Fügen Sie das folgende Snippet in die init-Methode ein:

Eine nette Art, Elemente basierend darauf, ob JavaScript aktiviert ist, zu stylen, besteht darin, eine Klasse von "js" auf das documentElement oder das html-Element anzuwenden.

So können wir dann CSS schreiben wie:

Erinnern Sie sich an das Problem mit den zwei Gruppen von Videosteuerelementen?  Lassen Sie uns das jetzt beheben.  Das ist einfach. Wir verwenden einfach die removeAttribute-Methode und entfernen controls.

Fügen wir nun unser erstes HTML5-Ereignis hinzu: loadeddata.  Dieses Ereignis wird ausgelöst, wenn der Browser die Metadaten für das Video geladen hat.  Das ist eine hervorragende Stelle für die Durchführung von anfänglichen Verfahren, z. B. das Anzeigen benutzerdefinierter Steuerelemente. 

Wenn Sie ein bisschen JavaScript kennen, könnten Sie befürchten, dass wir den Internet Explorer nicht kompensieren.  Für diejenigen, die dies nicht wissen, erkennt IE8 und darunter addEventListener nicht.  In der Art und Weise, wie es sich gewöhnt hat, benutzt IE sein eigenes attachEvent.  Das ändert sich jedoch in Version 9 des Browsers.  Da IE8 und darunter das video-Element nicht verstehen, können wir das Ereignis attachEvent vollständig ignorieren.

Wenn das Ereignis loadeddata ausgelöst wird, rufen wir die noch zu erstellende Methode "initializeControls" auf.  Innerhalb einer Objektmethode können wir nicht auf "initializeControls" selbst verweisen.  Wir müssen zuerst das Objekt selbst referenzieren: daher this.initializeControls.

initializeControls: Unsere benutzerdefinierten Steuerelemente

Lassen Sie uns jetzt diese Methode erstellen.

Wie bereits erwähnt, verwenden Sie diese Methode, wenn Sie Ihren eigenen benutzerdefinierten Player schreiben, um zusätzliche Initialprozeduren auszuführen.  Vorläufig ruft diese Methode eine andere Methode auf, showHideControls.  Mit dieser neuen Methode werden die Steuerelemente ein- oder ausgeblendet, wenn der Benutzer den Mauszeiger über das Video bewegt.

Die showHideControls-Methode

Diese Methode hängt vier Ereignishandler an den Videoplayer an und steuert Elemente, die durch die video- und videoControls-Variablen repräsentiert werden.  Dieser Code ist einfach: Wenn Sie den Mauszeiger über das Video bewegen, ändern Sie die Opazität der Videosteuerelemente auf 1. Wenn Sie die Maus deaktiviert haben, blenden Sie die Steuerelemente aus der Ansicht aus.  Dieser Code geht außerdem davon aus, dass opacity des Videosteuerelements in unserem Stylesheet standardmäßig auf "Keine" festgelegt ist.

Denken Sie daran: Wenn möglich, delegieren Sie das Styling immer an unsere CSS-Datei, anstatt es direkt mit Ihrem JavaScript hinzuzufügen.  Zusätzlich zu den Leistungsvorteilen und der Reduzierung von Rückflüssen/Repaints hält diese Praxis die Trennung von Darstellung und Logik korrekt aufrecht.  Von Zeit zu Zeit haben Sie jedoch keine andere Wahl, als das Styling in Ihre JavaScript-Datei einzufügen. In diesen Fällen ist das in Ordnung.

Taste drücken

Wir haben jetzt die Standardsteuerelemente erfolgreich ausgeblendet, jedoch haben wir diesen verschiedenen benutzerdefinierten Schaltflächen noch keine Logik hinzugefügt.  Das müssen wir als nächstes tun.

Kehren Sie zur init-Methode zurück, und hängen Sie einen Aufruf an eine neue Methode an.

Es steht Ihnen natürlich frei, diese Methoden wie gewünscht zu benennen, aber versuchen Sie zumindest, sie so zu benennen, dass Sie genau verstehen, was der Zweck der Funktion ist.

handleButtonPresses

Innerhalb dieser Methode fügen wir dem video-Element wieder eine Handvoll neuer Ereignisse hinzu: play, pause und ended.

  • play: Wird ausgelöst, wenn das Video abgespielt wird.
  • pause: Wird ausgelöst, wenn das Video pausiert ist.
  • ended: Wird ausgelöst, wenn das Video abgeschlossen ist.  Dieser Ereignis-Listener kann verwendet werden, um das Video an den Anfang zurückzusetzen.

Beachten Sie, dass das play-Ereignis zum Beispiel nicht ausgelöst wird, wenn Sie auf die von uns erstellte Wiedergabetaste klicken.  Nein, stattdessen wird es ausgelöst, wenn das Video selbst abgespielt wird.  Das ist ein wichtiger Unterschied, an den man sich erinnern sollte.

Um die oben aufgeführten Ereignisse auszulösen, fügen wir der Wiedergabe-Schaltfläche einen weiteren Ereignis-Listener hinzu und achten darauf, wenn der Benutzer darauf klickt.

Die playPause-Methode

Lassen Sie uns den Code oben allgemein durchsprechen.  Wenn diese Methode aufgerufen wurde - in unserem Fall, wenn der Play-Button zum ersten Mal angeklickt wurde - war es pausiert oder am Ende des Videos?  Wenn letzteres erforderlich ist, müssen wir die Zeit des Videos zurück auf 0 setzen, damit es wieder von Anfang an abgespielt werden kann.  Als nächstes müssen wir das Video abspielen: video.play().

Wenn nun das Video nicht pausiert wurde oder am Ende war - was bedeutet, dass das Video gerade abgespielt wurde, als die Play-Taste geklickt wurde, sollten wir das Gegenteil tun und stattdessen das Video anhalten: video.pause().

Umschalten der Wiedergabe/Pause-Tasten

Die playPause-Methode, die oben detailliert beschrieben wird, behandelt den Prozess des Wiedergebens oder Pausierens des Videos.  Aber wir müssen dem Benutzer sicherlich ein Feedback geben, was der Knopfdruck tut, richtig?  Bestimmt; Um das zu tun, wechseln wir bei jedem Klick auf einen Button zwischen "play" und "pause" HTML character code.  Im Wesentlichen behandelt dieser eine Knopf sowohl das Spielen als auch das Pausieren.

Wenn Sie von einem Moment auf die Ereignis-Listener verweisen, haben wir diese Funktionalität bereits hinzugefügt.

Ziemlich einfach, oder?  Wenn die Wiedergabetaste gedrückt wird, wird das click-Ereignis der Wiedergabetaste ausgelöst, die video.play() aufruft.  Diese Methode spielt dann das Video ab und löst das play-Ereignis aus.  Das play-Ereignis ändert dann den Wert der Schaltfläche in ein Pause-Symbol und aktualisiert auch das Titelattribut.  Schließlich, wenn dieser Prozess erneut auftritt, tun wir das Gegenteil.

Vollbild-Unterstützung

Ich habe es im ersten Abschnitt dieses Tutorials erwähnt: Vollbildunterstützung ist ein Muss für mich.  Fügen wir diese Funktionalität jetzt hinzu.  Kehren Sie zu Ihrer init()-Methode zurück und fügen Sie am unteren Rand ein weiteres Snippet hinzu.  Wir müssen darauf achten, wann diese Vollbild-Umschalttaste, die wir erstellt haben ....

...ist geklickt.  Wenn das der Fall ist, sollten wir entweder das Video auf den Vollbildmodus umschalten oder umgekehrt.

Nicht vergessen: fullScreenToggleButton bezieht sich auf die Schaltfläche "fullScreen".

Moment mal: was ist that?  Sollte es this nicht sein?  Die Antwort ist nein.  Im Zusammenhang mit dem Klickereignis bezieht sich this jetzt auf die Schaltfläche "fullScreen", nicht auf das videoPlayer-Objekt.

Um das zu beheben, "cachen" wir den ursprünglichen Wert this in einer Variablen namens that.  Das kann am Anfang unserer init()-Methode hinzugefügt werden.

Ta da! Jetzt können wir uns wieder auf das videoPlayer-Objekt beziehen.  Daher bedeutet that.fullScreenOff, "greifen Sie auf die Methode namens" fullScreenOff "zu, die ein Kind des videoPlayer-Objekts ist.

Es gibt ein Problem.  Wie ermitteln wir den aktuellen Stand des Videos?  Ist es in voller Größe oder normale Größe?  Eine einfache Möglichkeit, mit dieser Situation umzugehen, besteht darin, eine Variable namens "isVideoFullScreen" zu erstellen.  Sie können diese Variable ganz oben auf Ihrer Seite zusammen mit den anderen hinzufügen.  Standardmäßig sollte dieser Wert natürlich auf false gesetzt sein.

Dieser boolesche Befehl erlaubt es uns jetzt, die richtige Funktion korrekt aufzurufen, wenn auf die Schaltfläche "fullScreen" geklickt wird.

Mit dem ternären Operator überprüfen wir: "Ist das Video gerade im Vollbildmodus?  Wenn ja, rufen wir fullScreenOff() auf.  Ansonsten rufen wir fullScreenOn() auf.

Innerhalb dieser beiden Funktionen ändern wir zuerst den Wert von isVideoFullScreen entsprechend.  Als nächstes passen wir die Größe des Videos selbst an.  cssText ermöglicht es uns, eine Zeichenkette an ein Element zu übergeben.  In diesem Fall können wir diese Aufgabe nicht direkt in unserem Stylesheet erledigen.  Das liegt daran, dass die gewünschten Werte dynamisch sind und von der Größe des Browserfensters des Besuchers abhängen.

Verwenden Sie window.innerWidth und window.innerHeight, um die Breite und Höhe des Browserfensters abzurufen.

Es ist auch eine gute Übung, Vollbild-spezifische Klassennamen auf unsere Elemente anzuwenden.  Wenn Sie also ein entsprechendes Styling hinzufügen müssen, haben Sie jetzt einen Klassennamen zum Einhängen.

Die Escape-Taste

Zusätzlich zum Vollbild-Umschaltknopf ist es auch üblich, den Vollbildmodus zu verlassen, wenn der Benutzer die Escape-Taste auf seiner Tastatur drückt. Es ist eine nette Annehmlichkeit und eine, die wir in unseren Player implementieren sollten.  Zum Glück ist es einfach!

Um auf Tastenklicks zu hören, verwenden wir das keydown-Ereignis.  Obwohl ich eine anonyme Funktion als zweiten Parameter übergeben könnte, könnte dieses Codebit an mehreren Stellen verwendet werden.  Und wenn das zutrifft, sollte der Code zur Wiederverwendung in seine eigene Funktion verschoben werden.  Wir nennen es checkKeyCode.

checkKeyCode

Diese Funktion ist leider aufgrund von Internet Explorer-Problemen verwirrender als es sein sollte.  Ich bin zwar nicht sicher, wie der kommende IE9 das Event-Objekt behandelt, aber bis auf Weiteres werden wir die Diskrepanzen zwischen der Art, wie der IE und die anderen modernen Browser das Event-Objekt handhaben, immer noch kompensieren.

Langweiliges Zeug beiseite, überprüft dieser Code, um zu sehen, ob der Schlüssel, auf den geklickt wurde, einen Code von "27" hat.  Wenn dies der Fall ist, wurde die "Escape"-Taste gedrückt. In diesem Fall können wir den Vollbildschirm über videoPlayer.fullScreenOff() beenden.

Den Fortschritt verfolgen

Zu guter Letzt, müssen wir den Fortschritt des Videos verfolgen.  Während das Video fortschreitet, müssen wir einen "Scrubber" zur Verfügung stellen, der das Verfolgen des Videos erleichtert.  Darüber hinaus kann der Benutzer schnell den gewünschten Teil des Videos scannen.

Wann sollten wir mit der Verfolgung beginnen?

Das ist einfach: wenn das Video läuft!  In diesem Sinne ändern wir unseren play-Ereignis-Code  und rufen eine Funktion auf, die den Fortschritt des Videos verfolgt.

TrackPlayProgress

Lassen Sie sich von diesem Code nicht erschrecken.  Es ist lediglich eine rekursive Funktion, die es uns ermöglicht, alle 50 Millisekunden eine andere Methode aufzurufen, updatePlayProgress().  Warum nicht setInterval verwenden?  Das liegt daran, dass setInterval manchmal unangenehm sein kann.  Ohne zu sehr ins Detail zu gehen, was den Rahmen dieses Tutorials sprengt, wird setInterval (in diesem Fall) alle 50 Millisekunden ausgeführt, unabhängig davon, wie lange der Code innerhalb der Funktion dauert.

setInterval ist wie ein Fahrer im Berufsverkehr, der sich weigert, auf die Pausen zu treten.

Wenn möglich, ist das Kombinieren von setTimeout mit einer rekursiven Funktion die intelligentere Lösung.  Beachten Sie, dass wir setTimeout einer Variablen namens playProgressInterval zuweisen, da wir dieses Zeitlimit später löschen müssen.  Daher brauchen wir eine Art ID, in die wir uns einklinken können.

updatePlayProgress

Jetzt, da wir festgelegt haben, dass alle 50 Millisekunden die updatePlayProgress-Methode aufgerufen werden soll, erstellen wir sie jetzt.

Obwohl der obige Code am Anfang vielleicht sehr verwirrend erscheint, ist es nicht so schlimm.  Wir greifen den Fortschrittsbalken und aktualisieren seine Breite (alle 50ms).  Wir können die richtige Breite bestimmen, indem wir die aktuelle Position des Videos durch die Länge des Videos dividieren -- was wir mit video.duration berechnen können.  Dieser Wert sollte dann mit der Gesamtbreite unseres Fortschrittshalters multipliziert werden, und voila!

Aber was passiert, wenn das Video vom Benutzer pausiert wird?  Wir wollen dieses setTimeout sicher nicht fortsetzen.  Natürlich nicht.  Daher sollten wir eine andere Methode namens stopPlayProgress erstellen und auf sie verweisen, wenn das pause-Ereignis ausgelöst wird.

Reinigung des Video

Der letzte Schritt, den wir in diesem Tutorial behandeln, beschreibt, wie Sie das Video "Reinigen " können -- d.h. wenn der Benutzer auf die Fortschrittsanzeige klickt und das Video hoch und runter scrollt.  Ich bin mir sicher, dass Sie diese Aufgabe mehrmals selbst ausgeführt haben.  Nein, nein, nein; diese Dinge werden automatisch erledigt.  Wir müssen diese Funktionalität programmieren.

Schnell ... halten Sie den Atem an.

... und atmen Sie aus.  Nehmen wir diesen riesigen Klumpen Code Zeile für Zeile.

  • Achten Sie darauf, wenn der Benutzer auf den Fortschrittsbalken klickt.
  • Wenn das der Fall ist, rufen Sie videoPlayer.stopTrackingPlayProgress auf, um das oben erstellte Zeitlimit zu löschen.
  • Rufen Sie als Nächstes die playPause-Methode auf, die in diesem Fall das Video pausiert.
  • Während die Maus gedrückt wird, hören Sie nach, wenn sie sich bewegt.  Wenn das der Fall ist, rufen Sie die Methode setPlayProgress auf.
  • Diese komplizierte Methode ist schwer mit Worten zu erklären; Sie müssen es ein wenig studieren.  Im Wesentlichen bestimmt der Code, wo Sie geklickt haben, und teilt diesen dann durch die gesamte Breite des Fortschrittsbalkens.  Als Nächstes aktualisiert es die aktuelle Zeit des Videos und die Breite des dynamischen Fortschrittsbalkens.
  • Nachdem diese Funktion zurückgegeben wurde, hören wir als nächstes zu, wenn der Benutzer von seinem ursprünglichen Klick weg mauset.  Wenn das der Fall ist, löschen wir alle vorhandenen Mausereignisse und fahren mit der Wiedergabe des Videos fort und verfolgen den Fortschritt erneut.

Schlussfolgerung

Es gibt keine zwei Möglichkeiten; dieses Zeug ist verwirrend, bis man plötzlich das "Klicken" hört.  Das wird normalerweise von einem erweiterten "Oooohhhhhh" fortgeführt.  Wenn Sie noch nicht da waren, wenn deine Augen nicht umhin konnten, dieses lange Tutorial zu überrollen, ist das okay.  Lesen Sie es noch einmal und, am wichtigsten, arbeiten Sie mit.  Nur so können wir wachsen.  Zweitens, große Codehaufen sind zugegebenermaßen schwer alle gleichzeitig aufzunehmen.  Um das zu kompensieren, lesen Sie sich dieses Tutorial noch einmal in kleinen Teilen durch, während Sie sich auf den endgültigen Quellcode beziehen.  Das wird Ihrem Verstand helfen, genau zu verstehen, wo jeder Code-Block gehört.

Auf der visuellen Seite ist das Wunderbare an solchem benutzerdefinierten Player, dass er, sobald die Logik einmal geschrieben wurde, zu 100% hautbar ist.  Verfolgen Sie einfach Ihre gewünschten ids und classes und Sie sind fertig.  Die mit diesem Tutorial zur Verfügung gestellte Demo bietet eine Option, aber wenn Sie das Aussehen nicht mögen, kein Problem; entwerfen Sie Ihre eigenen!


Was kommt als nächstes?

Wir haben jetzt einen ordentlichen und funktionellen Spieler, aber er kann weiter ausgedehnt werden.  In der nächsten Lektion (kostenlos für Sie) erfahren Sie, wie Sie unseren Videosteuerelementen einen Lautstärkeregler sowie einen Timer hinzufügen.  Also bleibt gespannt.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.