Haupt / Computing

Erstellen Sie einen benutzerdefinierten HTML5-Videoplayer

Erforderliche Kenntnisse: Intermediate HTML, Intermediate JavaScript, Intermediate CSS
Benötigt : Texteditor, HTML5-fähiger Browser
Projektzeit : 2-3 Stunden

Laden Sie die Quelldateien für dieses HTML5-Tutorial herunter

Es ist allgemein bekannt, dass mit HTML5-Websites Sie können Audio- und Videodateien direkt im Browser abspielen, ohne dass Plug-Ins von Drittanbietern über die Elemente und erforderlich sind. Da die Spezifikation jedoch nicht definiert, wie die Steuerelemente für Audio- und Videodateien aussehen sollen, hat jeder Browserhersteller eine eigene Benutzeroberfläche für seinen Player entwickelt, die natürlich für jeden Browser eine andere Benutzererfahrung bietet.

Wenn Sie jedoch eine konsistente Schnittstelle zu Ihren Mediendateien bereitstellen möchten, können Sie Ihren eigenen Player über eine Kombination aus HTML, CSS und der HTML5-Medien-API erstellen. Wenn Sie mit der API nicht vertraut sind, habe ich im zugehörigen Download für dieses Lernprogramm eine Einführung in einige der relevanten Funktionen aufgenommen.

Erstellen des Media Players

Zu Beginn benötigen Sie lediglich Ihren bevorzugten HTML-Editor (den ich verwende) Editor ++ ). Wenn Sie möchten, können Sie sich vorher hinsetzen und den Player entwerfen - aber da ich kein Designer bin, werde ich das nicht tun.

Unser benutzerdefinierter Media Player entspricht den Schnittstellenkonventionen. Die Wiedergabetaste (links) ändert sich während der Medienwiedergabe in eine Pause-Taste (rechts)

Zunächst benötigen wir eine einfache HTML-Seitenvorlage, um unseren Player zu enthalten:

Sample HTML5 Media Player

Wie Sie sehen können, enthalten wir eine CSS-Datei, die das Styling für unseren Media Player enthält, und eine JavaScript-Datei, die den Code enthält, der den Player steuert. Ich werde in diesem Artikel nicht auf das CSS für den Player eingehen.

Es gibt auch ein Videoelement, das über zwei anfängliche Quellelemente definiert wird: Das Testvideo ist in den Formaten MP4 und WebM. Beachten Sie, dass wir das Steuerelementattribut für das Videoelement festgelegt haben, obwohl wir unser eigenes Steuerelement festlegen möchten. Es ist besser, die Steuerelemente über JavaScript auszuschalten, falls der Benutzer JavaScript deaktiviert hat. Das Div mit der ID 'Media-Controls' enthält genau das, was es sagt. Aber zuerst müssen wir unseren Player initialisieren, was wir über JavaScript tun.

Die Standard-Videosteuerelemente variieren von Browser zu Browser. Von links nach rechts und von oben nach unten: Firefox, Chrome, Opera, Safari, IE9, IE10

Initialisierung

Wenn wir zu unserer JavaScript-Datei wechseln, definieren wir eine Funktion namens initialiseMediaPlayer (), die wir beim Laden des Dokuments aufrufen müssen. Dazu fügen wir einen Listener für das DOMContentLoaded-Ereignis hinzu:

document.addEventListener('DOMContentLoaded', function() { initialiseMediaPlayer(); }, false);

Darüber hinaus definieren wir eine globale Variable, um ein Handle in unserem Media Player zu speichern:

var mediaPlayer;

Unsere Funktion initialiseMediaPlayer () erhält einfach ein Handle für unseren Media Player und blendet dann die Steuerelemente aus, wie bereits erwähnt:

function initialiseMediaPlayer() {    mediaPlayer = document.getElementById('media-video');    mediaPlayer.controls = false; }

Wie Sie sehen können, verwenden wir das Attribut Boolesche Steuerelemente aus der Medien-API, um den Standard-Media-Player-Steuerungssatz des Browsers auszublenden.

Hinzufügen der Schaltflächen

Jetzt werden wir Schaltflächen hinzufügen: vor allem die Wiedergabetaste. Da viele Mediaplayer eine Taste verwenden, um zwischen Wiedergabe- und Pausenfunktion zu wechseln, werden wir dasselbe tun. Fügen Sie diesen Code hinzu, um die Schaltfläche zu definieren:

Play

Dies definiert eine Wiedergabe- / Pause-Schaltfläche mit entsprechenden Attributen. Wenn darauf geklickt wird, wird eine JavaScript-Funktion namens togglePlayPause () aufgerufen. Die CSS-Wiedergabeklasse definiert die Schaltfläche als Wiedergabetaste mit einem geeigneten Bild.

Natürlich macht diese Schaltfläche nicht viel, bis wir die Funktion togglePlayPause () schreiben, um die Schaltfläche zwischen Wiedergabemodus und Pausenmodus umzuschalten. Die Funktion selbst ist ziemlich einfach, also werden wir direkt darauf eingehen und sie uns dann genauer ansehen:

function togglePlayPause() {    var btn = document.getElementById('play-pause-button');    if (mediaPlayer.paused || mediaPlayer.ended) {       btn.title = 'pause';       btn.innerHTML = 'pause';       btn.className = 'pause';       mediaPlayer.play();    }    else {       btn.title = 'play';       btn.innerHTML = 'play';       btn.className = 'play';       mediaPlayer.pause();    } }

Zunächst erhalten wir einen Griff für unsere Wiedergabe- / Pause-Taste, der während der gesamten Funktion verwendet werden kann. Anschließend überprüfen wir die angehaltenen und beendeten Attribute des Media Players, um festzustellen, ob das Medium angehalten oder beendet wurde. In diesem Fall müssen wir das Medium abspielen und die Schaltfläche als Pause-Schaltfläche anzeigen. Daher ändern wir den Titel, den HTML-Text und den Klassennamen und rufen dann die play () -Methode auf unserem Media Player auf.

Die Stopp-Taste hält das Medium an und bringt es in seine Startposition

Wenn der Media Player nicht angehalten oder beendet wurde, können wir davon ausgehen, dass das Medium abgespielt wird. Daher müssen wir es anhalten und dann die Schaltfläche als Wiedergabetaste festlegen. Dieses Mal rufen wir die pause () -Methode auf, um das Medium selbst anzuhalten.

Da wir die Werte für title, innerHTML und className verschiedener Schaltflächen im gesamten Code ändern möchten, ist es sinnvoll, eine Funktion zu definieren, die dies für uns erledigt: changeButtonType (). Wir werden es von nun an verwenden:

function changeButtonType(btn, value) { btn.title = value; btn.innerHTML = value; btn.className = value; }

Eine weitere nützliche Funktion ist eine Stopptaste:

Stop

Die Medien-API bietet keine bestimmte Stoppmethode, da es keinen wirklichen Unterschied zwischen dem Anhalten und Stoppen einer Video- oder Audiodatei gibt. Stattdessen hält unsere stopPlayer () -Funktion das Medium einfach an und setzt das currentTime-Attribut auf 0 zurück, wodurch das Medium effektiv an die Startposition zurückgebracht wird:

function stopPlayer() { mediaPlayer.pause(); mediaPlayer.currentTime = 0; }

Als Nächstes fügen wir separate Schaltflächen zum Erhöhen und Verringern der Lautstärke hinzu:

Increase volume Decrease volume

Wenn auf jede Schaltfläche geklickt wird, rufen wir die Funktion changeVolume () mit einem Parameter auf, der die Richtung angibt (wir verwenden hier ein Plus- und Minuszeichen):

function changeVolume(direction) {    if (direction === '+') mediaPlayer.volume += mediaPlayer.volume == 1 ? 0 : 0.1;    else mediaPlayer.volume -= (mediaPlayer.volume == 0 ? 0 : 0.1);    mediaPlayer.volume = parseFloat(mediaPlayer.volume).toFixed(1); }

Diese Funktion überprüft den Parameter und ändert den Wert des Volume-Attributs des Media Players. Das Attribut hat einen Bereich zwischen 0 und 1, daher werden Inkremente oder Dekremente in Schritten von 0,1 vorgenommen, wobei überprüft wird, ob die Min- und Max-Werte eingehalten werden. Wir verwenden parseFloat () und toFixed (), um den Wert auf eine Dezimalstelle zu setzen.

Die oben gezeigten Tasten + und - steuern die Wiedergabelautstärke

Zusätzlich sollten wir eine Stummschaltfläche hinzufügen:

Mute

Und auch eine toggleMute () Funktion:

function toggleMute() {    var btn = document.getElementById('mute-button');    if (mediaPlayer.muted) {       changeButtonType(btn, 'mute');       mediaPlayer.muted = false;    }    else {       changeButtonType(btn, 'unmute');       mediaPlayer.muted = true;    } }

Diese Funktion ähnelt togglePlayPause (), da wir eines der Attribute des Media Players überprüfen, in diesem Fall stummgeschaltet. Wenn diese Option aktiviert ist, muss die Taste stumm geschaltet und der Media Player nicht mehr stummgeschaltet werden. Andernfalls muss die Schaltfläche nicht mehr stummgeschaltet und der Media Player stummgeschaltet werden.

Schließlich fügen wir eine Wiedergabetaste hinzu, um die aktuell geladene Mediendatei wiederzugeben. Wir machen diesen Button zum ersten im Control Set:

Replay

Das JavaScript für replayMedia () ist recht einfach:

function replayMedia() { resetPlayer(); mediaPlayer.play(); }

Alles was wir tun müssen, ist den Player zurückzusetzen und dann die play () Methode auf unserem Player aufzurufen. Unsere resetPlayer () -Methode sieht folgendermaßen aus:

function resetPlayer() { mediaPlayer.currentTime = 0; changeButtonType(playPauseBtn, 'play'); }

Diese Funktion setzt die Wiedergabeposition des Mediums über das Attribut currentTime zurück und stellt sicher, dass die Wiedergabe- / Pause-Taste auf Wiedergabe eingestellt ist. Wir werden diese Funktion später ergänzen.

Der benutzerdefinierte Player mit Fortschrittsbalken und Wiedergabesteuerung

Hinzufügen eines Fortschrittsbalkens

Mediaplayer bieten normalerweise einen Fortschrittsbalken, der angibt, wie viel des Videos abgespielt wurde. Dazu nutzen wir das HTML5-Fortschrittselement, das in den neuesten Versionen aller Browser (einschließlich IE10 und Safari 6) unterstützt wird: Es ist ein perfekter Kandidat für die Anzeige dieser Informationen.

0% played

Um das Video während der Wiedergabe zu verfolgen und den Fortschrittsbalken zu aktualisieren, warten wir auf das Timeupdate-Ereignis, das während der Wiedergabe des Mediums ausgelöst wird. Jedes Mal, wenn dieses Ereignis ausgelöst wird, können wir unseren Fortschrittsbalken aktualisieren. In unserer Funktion initialiseMediaPlayer () müssen wir also warten und auf dieses Ereignis reagieren:

mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

Wenn das Ereignis timeupdate ausgelöst wird, wird die Funktion updateProgressBar () aufgerufen, die wir wie folgt definieren:

function updateProgressBar() {    var progressBar = document.getElementById('progress-bar');    var percentage = Math.floor((100 / mediaPlayer.duration) *    mediaPlayer.currentTime);    progressBar.value = percentage;    progressBar.innerHTML = percentage + '% played'; }

Hier erhalten Sie einen Überblick über den Fortschrittsbalken, ermitteln anhand der Attribute 'length' und 'currentTime', wie viel Medien abgespielt wurden, und setzen den Wert des Fortschrittsbalkens auf diesen Wert. Wir aktualisieren auch den HTML-Text des Elements für Browser, die das Fortschrittselement nicht unterstützen.

Wir müssen auch den Fortschrittsbalken in resetPlayer () zurücksetzen, der wie folgt lautet:

function resetPlayer() {    progressBar.value = 0;    mediaPlayer.currentTime = 0;    changeButtonType(playPauseBtn, 'play'); }

Unser Player zeigt jetzt erfolgreich den Fortschritt der Medien während der Wiedergabe an.

Mehr zu Veranstaltungen

Obwohl wir den Standardsteuerungssatz des Browsers deaktiviert haben, kann ein Benutzer weiterhin auf die Standardeinstellungen zugreifen: in Firefox beispielsweise durch Klicken mit der rechten Maustaste auf unseren Media Player. Wenn ein Benutzer das Medium auf diese Weise steuert, sind einige der Steuerelemente in unserem Steuerungssatz nicht mehr synchron.

Wir können dieses kleine Problem beheben, indem wir auf die Ereignisse achten, die vom Browser ausgelöst werden, wenn ein Benutzer auf diese Weise mit dem Media Player interagiert, und entsprechend handeln.

Benötigen Sie weitere Details? Probieren Sie Ian Devlins Buch

Für die Wiedergabe- und Pause-Tasten müssen wir nur auf die Wiedergabe- und Pause-Ereignisse warten und den Text der Tasten nach Bedarf ändern:

mediaPlayer.addEventListener('play', function() {    var btn = document.getElementById('play-pause-button');    changeButtonType(btn, 'pause'); }, false); mediaPlayer.addEventListener('pause', function() {    var btn = document.getElementById('play-pause-button');    changeButtonType(btn, play); }, false);

In ähnlicher Weise müssen wir für die Stummschalttaste auf das Volumenänderungsereignis warten, das ausgelöst wird, wenn sich entweder die Stummschalt- oder die Lautstärkewerte des Players ändern, und den Text der Stummschalttaste aktualisieren:

mediaPlayer.addEventListener('volumechange', function(e) {    var btn = document.getElementById('mute-button');    if (mediaPlayer.muted) changeButtonType(btn, 'unmute');    else changeButtonType(btn, 'mute'); }, false);

Jetzt bleiben unsere benutzerdefinierten Steuerelemente synchron, wenn ein Benutzer das Standardsteuerelement des Browsers anstelle unserer hübschen benutzerdefinierten Steuerelemente verwendet.

Implementieren einer Wiedergabeliste

Um unseren Media Player zu vervollständigen, fügen wir eine Wiedergabeliste hinzu. Zu Beginn benötigen wir eine aktuelle Liste der Elemente, die wir unserer Wiedergabeliste hinzufügen möchten:

 Play list
   Parrots 
  Paddle Steamer Wheel 
  Grass

Wie bei unseren ersten Videoelementen stellen wir unsere Videodateien sowohl im MP4- als auch im WebM-Format zur Verfügung. Wenn ein Benutzer auf ein Element klickt, werden diese an eine loadVideo () -Funktion übergeben, die wir natürlich definieren müssen:

function loadVideo() {    for (var i = 0; i < arguments.length; i++) {       var file = arguments[i].split('.');       var ext = file[file.length - 1];       if (canPlayVideo(ext)) {          resetMediaPlayer();          mediaPlayer.src = arguments[i];          mediaPlayer.load();          break;       }    } }

Zuerst rufen wir die variablen Argumente der Funktion ab (möglicherweise haben wir nur eine Videoquelldatei oder möglicherweise mehr als zwei bereitgestellt). Für jede Videodatei erhalten wir die Dateierweiterung. Wir müssen prüfen, ob der Browser diesen Dateityp tatsächlich abspielen kann, also definieren wir eine andere Funktion, canPlayVideo (), die genau das tut:

function canPlayVideo(ext) {    var ableToPlay = mediaPlayer.canPlayType('video/' + ext);    if (ableToPlay == '') return false;    else return true; }

Diese Funktion ruft einfach die canPlayType () -Methode der Medien-API auf. Weitere Informationen hierzu finden Sie im unterstützenden Download des Tutorials. Wenn eine leere Zeichenfolge zurückgegeben wird, wird davon ausgegangen, dass der Browser diese Datei nicht abspielen kann. Andernfalls gehen wir davon aus, dass dies möglich ist. Wenn die Funktion canPlayVideo () uns darüber informiert, dass diese bestimmte Videodatei tatsächlich abgespielt werden kann, müssen wir den Media Player zurücksetzen, was wir über die zuvor hinzugefügte Funktion resetPlayer () tun.

Unser fertiger Media Player mit einer Wiedergabeliste der verfügbaren Dateien

Schließlich müssen wir die neue Videodatei in den Player laden, indem wir deren src festlegen und dann die load () -Methode auf dem Player selbst aufrufen. Das neue Video kann jetzt abgespielt werden. Hier können Sie eine Demo des Endergebnisses sehen .

Zusammenfassung

In diesem Lernprogramm wurden nur die Grundlagen behandelt, was Sie mit der Medien-API tun können und wie Sie damit ein benutzerdefiniertes Steuerelement für einen HTML5-Mediaplayer bereitstellen können. Während wir uns auf Video konzentriert haben, kann der obige Code sehr einfach angepasst werden, um HTML5-Audio anstelle von oder sowie Video zu unterstützen.

Wir hätten auch zusätzliche Steuerelemente hinzufügen können, z. B. zeitgesteuerte Anzeigen für das Medium, Schaltflächen zum Überspringen zum Anfang und Ende des Mediums oder die Möglichkeit, über den Fortschrittsbalken innerhalb des Mediums vorwärts und rückwärts zu springen. Warum nicht erkunden die Online-Dokumentation für die API und sehen Sie, ob Sie diese Funktionen dem Player selbst hinzufügen können?

Wörter: Ian Devlin