Und mehr treten in das Leben eines jeden Menschen ein. Auch das globale Netzwerk unterliegt diesem Trend, wie der Erfolg und die Beliebtheit von Diensten wie YouTube belegen. Der Betrieb solcher Systeme ist jedoch ohne Technologien, die es ermöglichen, Videoinhalte für den Benutzer wiederzugeben, nicht möglich.

Der klassische Ansatz zur Implementierung eines Videoplayers ist die Verwendung der Flash-Technologie. Es ist wahrscheinlich schwierig, ein häufigeres Webbrowser-Plugin zu finden als Flash Player. Es ist jedoch anzumerken, dass der Schwachpunkt dieses Ansatzes in der Notwendigkeit liegt Flash-Installationen Plugin. Und bei vielen Geräten fehlt es völlig. Beispielsweise verfügen die beliebten iPhones und iPads nicht über die Möglichkeit, Flash-Anwendungen im Browser auszuführen. Der Ausweg aus dieser Situation ist die Verwendung von HTML5.

Dieser moderne Standard HTML-Sprache brachte viele Innovationen. Aber der Schlüssel für uns ist die Fähigkeit, Videos abzuspielen Standardmittel Webbrowser. Zu diesem Zweck wurde das Tag in die HTML5-Spezifikation eingeführt

• Automatisches Abspielen— wenn es dieses Attribut mit dem Wert „ automatisches Abspielen' Die Wiedergabe beginnt sofort, nachdem genügend Videos geladen wurden.
• Kontrollen– der Wert dieses Attributs ist gleich „ Kontrollen werden die Wiedergabesteuerungen angezeigt.
• Höhe– Höhe des Players in Pixel.
• Schleife – dieses Attribut, einstellen ' Schleife' führt dazu, dass das Video nach Abschluss in einer Schleife abgespielt wird.
• Stummgeschaltet– mit dem Wert „ gedämpft' schaltet den Ton der Videodatei stumm.
• Poster– Dieses Attribut akzeptiert die URL des Bildes, das angezeigt wird, bevor der Inhalt abgespielt wird.
• Vorladen– Das Attribut bestimmt die Browserstrategie zum Laden von Videoinhalten. Kann verschiedene Bedeutungen annehmen:
  • ‘Auto'– ob das Laden des Videos beim Laden der Seite beginnen soll.
  • ‘Metadaten'– wenn beim Laden der Seite nur die Inhaltsmetadaten geladen werden sollen.
  • ‘Keiner'– Wenn beim Laden der Seite das Video nicht geladen werden soll.
• Src– Dieses Attribut enthält die URL der Datei mit Videoinhalt.
• Breite— enthält den Größenwert des Spielers.

Fallstricke und erste Schwierigkeiten

Leider ist es nicht so einfach. HTML5 ist ein relativ junger Standard. Als Erstes ist also die eingeschränkte Browserunterstützung zu beachten. Verwenden eines Tags

• IE 9+
• Firefox 4.0+
• Chrome 6+
• Safari 5+
• Opera 10.6+

Es ist auch erwähnenswert, dass verschiedene Browser reproduzieren verschiedene Formate Video, d.h. Es ist notwendig, denselben Inhalt in verschiedenen Formaten für verschiedene Browser aufzubereiten. Die folgende Tabelle zeigt die wichtigsten Browser mit ihrer Unterstützung für Formate:

Es gibt einen Mechanismus zur browserübergreifenden Wiedergabe. Es besteht darin, nach innen hinzuzufügen

Bitte beachten Sie, dass die Wiedergabesteuerung in verschiedenen Browsern unterschiedlich aussieht. Daher ist es für die Vereinheitlichung notwendig, eine eigene Player-Schnittstelle zu entwickeln. Die Idee ist äußerst einfach: Die Steuerelemente sind Divs, die über dem Videocontainer positioniert sind.

Das ist erwähnenswert verschiedene Browser Bei der Arbeit mit HTML5-Videos kann es zu einem unterschiedlichen Verhalten kommen. Zum Beispiel aufiOS-Geräte können die Wiedergabe nicht automatisch starten.

Auch Es gibt keine Möglichkeit, die Größe des Videopuffers in irgendeiner Weise zu steuern. Es ist auch nicht möglich, die Größe der abgespielten Datei sowie die Download-Geschwindigkeit zu bestimmen.

Beginn der Arbeiten

Im HTML5-Standard verfügen Multimedia-Elemente über eine leistungsstarke API, mit der Sie nicht nur eine Single-Player-Schnittstelle entwickeln, sondern auch zusätzliche Funktionen implementieren können. JavaScript ist das Tool zum Arbeiten mit der HTML5 Media API.

Nehmen wir an, auf der Seite befindet sich der folgende Videocontainer:

Um mit dem Player über die API arbeiten zu können, müssen Sie ein Objekt definieren, das einen Container mit Medieninhalten enthält. Hierzu verwenden wir den JQuery-Selektor:

Var Spieler = $(‘#Spieler’);

Das war's, jetzt sind wir bereit, unseren Player über JS zu steuern! Um die Wiedergabe einer Datei zu starten und anzuhalten, genügt es, jeweils den folgenden Code auszuführen:

Player.start(); player.pause();

Mit der HTML5-Medien-API können Sie Informationen über das abgespielte Video abrufen. Sie können beispielsweise alle Manipulationen am Wiedergabeinhalt durchführen, indem Sie mit dem Feld „ arbeiten currentSrc':

Var currentSource = player.currentSrc; // URL des abgespielten Inhalts abrufen // player.currentSrc = 'path_to_new_media_source'; // Inhalt // im Player ersetzen

Gleiches gilt für die Video-Rückspulfunktion. Diese Funktionalität wird durch die „ aktuelle Uhrzeit’ (nimmt einen Float-Wert an, d. h. die aktuelle Wiedergabezeit in Sekunden):

Var currentTime = player.currentTime; // aktueller Wiedergabezeitwert player.currentTime = 60 // Zurückspulen zur 1-Minuten-Position

Sie können die Dauer der abgespielten Datei ermitteln, indem Sie auf das Feld „ zugreifen Dauer'. Und zusammen mit dem Wert der aktuellen Spielzeit lässt sich ganz einfach der Prozentsatz der angesehenen Inhalte berechnen:

Var duration = player.duration; // Inhaltsdauer in Sekunden var proportion = currentTime / duration; // Verhältnis von // Wiedergabezeit zu // Videodauer.

Es besteht die Möglichkeit, die Wiedergabelautstärke über das Feld „ zu steuern Volumen':

Player.volume = 1; // volle Lautstärke einschalten (um // den Ton auszuschalten, muss dem Feld der Wert „0“ zugewiesen werden)

Die Möglichkeiten der HTML5 Media API enden hier nicht. Die Implementierung komplexer Steuerungen kann über den Ereignismechanismus erfolgen. Nutzen Sie dazu einfach die Funktion addEventListenter(). Um beispielsweise das Ereignis „Ende der Wiedergabe“ zu abonnieren, gehen Sie einfach wie folgt vor:

Var onEndFunc = function() ( // Funktion wird aufgerufen, wenn // die Wiedergabe endet // einige Aktionen ) player.addEventListener(‘ended’, onEndFunc); // Abonnieren Sie die Funktion // am Ende des Videos player.removeEventListener(‘ended’, onEndFunc); // Abmeldefunktionen // vom Ende des Videos

Nachfolgend finden Sie alle Ereignisse, die in der HTML5-Medien-API vorhanden sind.

• Önabort– ungewöhnliches Wiedergabeereignis
• oncanplay– Ereignis der Bereitschaft zur Videowiedergabe nach dem Laden eines ausreichenden Teils in den Puffer
• oncanplaythrough– spielbereites Ereignis, nachdem der Inhalt vollständig in den Puffer geladen wurde
• ondurationchange— Ereignis zur Änderung der Inhaltsdauer
• einmal geleert– Ereignis, das ausgelöst wird, wenn die Verbindung unterbrochen wird
• beendet– Wiedergabe-Ende-Ereignis
• onerror— Fehlerereignis beim Laden einer Inhaltsdatei
• onloadeddata– Ereignis zum Laden von Inhalten
• onloadedmetadata– Ereignis zum Laden von Metadaten.
• Önloadstart– Startereignis für den Datei-Download
• OnPause– Wiedergabe-Stopp-Ereignis
• onplay— Startereignis der Wiedergabe
• weiterspielen– Wiedergabeereignis (wird ausgeführt, bis das Video stoppt)
• In Arbeit– Video-Ladevorgang-Ereignis (wird ausgeführt, bis der gesamte Inhalt geladen ist)
• onratechange– Ereignis zur Änderung der Wiedergabegeschwindigkeit
• onreadystatechange– Ereignis der Änderung des Bereitschaftszustands des Videoplayers
• gesucht– Endereignis des Videorücklaufs
• auf der Suche– Ereignis, das beim Zurückspulen von Inhalten ausgelöst wird
• Eingerichtet– ein Ereignis, das aufgerufen wird, wenn der Browser keinen Inhalt empfangen kann
• onsuspendieren– ein Ereignis, das ausgelöst wird, wenn das Laden von Inhalten stoppt.
• Öntimeupdate– Ereignis, das ausgelöst wird, wenn sich die aktuelle Wiedergabeposition ändert
• onvolumechange– Ereignis zur Änderung der Lautstärke
• wartend– Wiedergabestoppereignis zur Datenpufferung

Mithilfe dieser Ereignisse können Sie Videoplayer-Elemente wie Wiedergabelisten, die Anzeige von Untertiteln, die Anzeige des Zielbilds beim Zurückspulen und viele andere implementieren.

Dynamische Änderungen der Videoqualität

Wie oben erwähnt, verfügt HTML5 über kein Tool zum Arbeiten mit der Puffergröße, aber mit der Medien-API können Sie die Dauer des gepufferten Teils des Inhalts ermitteln, die für die Anzeige des zum Anzeigen verfügbaren Teils in der Rückspulleiste erforderlich ist . Führen Sie dazu einfach den folgenden Code aus:

Var bufferedTime = player.buffered.end(0); // temporäre Grenze // des gepufferten Teils

Jetzt kommt der spaßige Teil! Wenn Sie die Dauer des Inhalts im Puffer kennen, können Sie eine dynamische Bestimmung der Qualität des abgespielten Inhalts implementieren. Dazu müssen Sie eine Methode implementieren, die die Geschwindigkeit des Ladens von Informationen in den Puffer bewertet und je nach Wert die Videoqualität umschaltet.

Die Idee der Analyse ist folgende: Wir berechnen die Pufferaufbaurate, und wenn diese niedriger als die Wiedergabegeschwindigkeit ist, dann berechnen wir die Zeit, bis der Inhalt vollständig gepuffert ist, und vergleichen sie mit der verbleibenden Wiedergabezeit. Wenn die Pufferzeit bei der berechneten Geschwindigkeit größer ist als die verzögerte Wiedergabezeit, schalten wir den Inhalt auf eine niedrigere Qualität um.

Var bufferAnalizer = function (playbackStartPoint, PlaybackEndPoint, bufferStartPoint, bufferEndPoint, Dauer) ( var oldQualityObj = this.qualityObj, PlaybackStart = 0, // neuer Wiedergabe-Startpunkt bufferStart = 0; // neuer Puffer-Startpunkt if (oldQualityObj) ( PlaybackStart = oldQualityObj.playbackEndPoint; bufferStart = oldQualityObj.bufferEndPoint; ) else ( PlaybackStart = PlaybackStartPoint; BufferStart = BufferStartPoint; ) this.qualityObj = ( "playbackEndPoint": playingEndPoint, "bufferEndPoint": bufferEndPoint, "deltaBuffer": bufferEndPoint - bufferStart, // wie viele gepuffert „bufferSpeed“: (bufferEndPoint – bufferStart) / (playbackEndPoint – PlaybackStart), „deltaPlayback“: PlaybackEndPoint – PlaybackStart, // wie viel wurde // abgespielt „availTime“: bufferEndPoint – PlaybackEndPoint // Unterschied zwischen Puffer und // Playback position) var restTime = Dauer – PlaybackEndPoint, bufferTime = (Dauer – BufferEndPoint) / this.qualityObj.bufferSpeed; if ((bufferTime > restTime) && ((this.qualityObj.availTime / this.qualityObj.deltaPlayback)< 2)) { if (this.quality == "normal") { this.quality = "low"; } } }

Untertitel verbinden

Im HTML5-Standard gibt es ein spezielles Tag Zum Anzeigen von Untertiteln wird dies jedoch zum Zeitpunkt des Schreibens von keinem gängigen Browser unterstützt. Sie können diese Funktionalität jedoch manuell implementieren. Lassen Sie die Untertitel in der Datei „subs.srt“ liegen. Zuerst verbinden wir es und fügen den Inhalt in ein spezielles Objekt ein:

Var toSeconds = function(time) ( var seconds = 0.0; if (time) ( var p = time.split(":"); for (var i = 0; i< p.length; i++) seconds = seconds * 60 + parseFloat(p[i].replace(",", ".")) } return seconds; } $.get(subsSrc, function (data) { data = data.replace(/\r\n\r\n/g, "").split(""); for (var item in data) { var subItem = data.split(/\r\n/g); if (subItem.length >3) ( für (var i = 3; i< subItem.length; i++) { subItem += "
" + subItem[i]; ) ) var time = subItem.split(" --> "); self.subs.push(( id:subItem, sTime:self.toSeconds(time), eTime:self.toSeconds(time ), text:subItem )); ) ), "html");

Jetzt muss nur noch ein Timer erstellt werden, der abhängig von der aktuellen Uhrzeit die benötigten Untertitel in einem div mit der Klasse „.subs“ anzeigt:

Var self = this, lastSub = "empty", currentSub; this.subsTimer = setInterval(function () ( for (var item in self.subs) ( var currentTime = self.player.currentTime; if ((self.subs.eTime > currentTime) && (self.subs.sTime<= currentTime)) { currentSub = self.subs.text; } else if ((self.subs.eTime < currentTime)) { // no subs now currentSub = " "; } } if (currentSub && (currentSub != lastSub)) { self.container.find(".subs").html(currentSub); lastSub = currentSub; } }, 500);

Vorschau der Miniaturansichten beim Zurückspulen

Es gibt kaum jemanden, der den Komfort nicht schätzt, beim Zurückspulen einen Rahmen zum Verschieben anzuzeigen. Die Implementierung dieser Funktionalität ist keine schwierige Aufgabe. Um eine Vorschau zu erstellen, müssen Sie über dem Hauptcontainer mit Video eine neue kleinere mit demselben Videoinhalt erstellen und diese genau über dem Cursor positionieren:

Self.container.find(".controls").append(" ");

Und dann spulen wir das Video in diesem Container zurück:

Var self = dies; $(".seekbar).bind("mousemove", Funktion (e) ( self.cursorX = e.pageX; self.seek(self); )); this.scale = this. Container.find(".seekbar").width() / player.duration; var see = function (context) ( $(".thumb").currentTime = (self.cursorX - self.container.find(".seekbar").offset().left) / self.scale; )

Wechseln Sie in den Vollbildmodus

In den Browsern Firefox, Safari und Chrome gibt es eine spezielle API für das Arbeiten im Vollbildmodus. Der Mechanismus ermöglicht es Ihnen, das ausgewählte Div auf dem gesamten Bildschirm anzuzeigen. Die Funktionen, die diese Aktionen ausführen, sind in diesen Browsern unterschiedlich benannt, daher müssen Sie einen Aufruf für beide implementieren.

Var element = document.getElementById('player_container'); if (element.mozRequestFullScreen) ( element.mozRequestFullScreen(); // Für Firefox bereitstellen) else if (element.webkitRequestFullScreen) ( element.width("100%"); element.height("100%"); element.webkitRequestFullScreen (); // Für Chrome und Safari bereitstellen)

Bitte beachten Sie, dass für Chrome und Safari zusätzlich zum Vollbildmodus des Containers auch die Einstellung seiner Höhe und Breite auf 100 % erforderlich ist. Dies liegt am Methodenaufruf webkitRequestFullScreen() Verdunkeln Sie einfach den gesamten Bildschirm und zentrieren Sie den Zielcontainer. Die Containerskalierung bleibt vollständig dem Entwickler überlassen.

Die Tatsache, dass der Container auf den Vollbildmodus erweitert wird, kann anhand des Status der Felder bestimmt werden document.mozFullScreenElement für Firefox und document.webkitIsFullScreen für Browser auf WebKit.

Das Zurückschalten des Containers in den normalen Anzeigemodus ist über Undo-Funktionen möglich.

// Bestimmen Sie, ob ein Container im Vollbildmodus angezeigt wird. if (document.mozFullScreenElement || document.webkitIsFullScreen) ( if (document.mozCancelFullScreen) ( document.mozCancelFullScreen(); // Minimieren für Mozilla ) else if (document.webkitCancelFullScreen) ( document.webkitCancelFullScreen(); // Minimieren für Chrome und Safari))

Die FullScreen-API implementiert auch Anzeigestatusänderungsereignisse – „mozfullscreenchange“ bzw. „webkitfullscreenchange“. Oben wurde erwähnt, dass die Skalierung des Containers in WebKit in der Verantwortung des Entwicklers liegt; daher müssen Sie bei der Rückkehr zur normalen Anzeige auch die Größe des Containers mit dem Player ändern:

Document.addEventListener("webkitfullscreenchange", this.WebkitFullscreenEvent = function() ( if (!document.webkitIsFullScreen) ( self.container.width(width); self.container.height(height); ) ));

Andere Funktionalität

Bestimmen der Größe der heruntergeladenen Datei.

Wie bereits erwähnt, hat der Entwickler mit HTML5 keine Möglichkeit, die Größe einer Videodatei zu bestimmen. Es wird jedoch niemand verbieten, seine Größe vom Backend zu erhalten, sei es beim Generieren einer Playlist, beim Empfang der Dateiadresse oder durch Aufrufen einer speziellen Methode.

Audiospuren wechseln

Derzeit gibt es keine Implementierung zum Wechseln von Audiospuren. Natürlich können Sie mehrere Audioplayer mit Spuren auf einer Seite erstellen, aber in diesem Fall ist die Synchronisierung der Videowiedergabe und des gewünschten Audios eine äußerst nicht triviale Aufgabe.

Machen Sie einen Screenshot des abgespielten Videos

Wenn Sie einen Screenshot eines Videos erstellen müssen, erfahren Sie, wie Sie dies mit umsetzen kann gelesen werden.

Auswirkungen

Eine nette Funktion von HTML5-Video ist, dass alle Effekte, Transformationen und Masken, die über CSS3 durchgeführt werden können, auf den Player angewendet werden können. Ein Beispiel für eine solche Funktionalität ist zu sehen.

HTML5 vs. Flash

Es ist weit verbreitet, dass HTML5-Video eine Art „Killer“ von Flash ist, weil... bietet ähnliche Funktionalität. In Wirklichkeit stimmt das natürlich nicht ganz. HTML5 eignet sich nicht für die Bereitstellung von Premium-Videodiensten, weil... unterstützt die folgenden wichtigen Funktionen nicht:

• Ein Video streamen. HTML5 ist nur zum Abspielen von Videodateien geeignet.
• Inhaltsschutz. Gleichzeitig bietet Flash die Möglichkeit, Sicherheitstechnologien einzusetzen.
• Eine einzige API und ihre Implementierung für alle Browser.
• Standard-Videoformat. Unterschiedliche Browser = unterschiedliche Videoformate für den HTML5-Player.

Es ist jedoch anzumerken, dass bereits daran gearbeitet wird, die Funktionen von HTML5-Video zu Flash zu erweitern. Diese Initiative geht zunächst einmal vom Suchriesen Google aus – mehr erfahren Sie im Bericht über die Rede eines Unternehmensvertreters auf der Streaming-Media-Konferenz Erstellen eines Video-Screenshots

PS

Halten Sie in naher Zukunft Ausschau nach einem Artikel über die Analyse abgespielter HTML5-Videos.

Eines der bemerkenswertesten Merkmale HTML5 streamt Audio.

Wenn Sie im Bereich Webentwicklung tätig sind, dann eine Auswahl aus 10 unglaubliche HTML5-Audioplayer es wird Ihnen sehr nützlich sein.

- Audio- und Videoplayer, der in reiner Sprache geschrieben ist HTML5 Und CSS. Die Unterstützung älterer Browser erfolgt über Blitz Und Silverlight Spieler, die nachahmen HTML5 MediaElement-API.
MediaElement bietet viele Designs und Unterstützung für gängige Plattformen: WordPress, Drupal, Joomla usw.

Dieser Player ist recht minimalistisch, aber funktional. Gut, wenn Sie Wiedergabelisten und ausgefallene Effekte benötigen!

Ein weiterer großartiger Spieler, vielleicht der beste auf der gesamten Liste. Profis ist, dass es sehr einfach einzurichten ist und in der Größe recht flexibel ist und auf eine unbegrenzte Anzahl von Farben anpassbar ist.
U Cross-Browser-Unterstützung, und für ältere Browser gibt es sie Blitz-analog.

Du benutzt Mootools Auf deiner Webseite? Wenn ja, dann könnte Ihnen dieser Player gefallen HTML5 Und Mootools JavaScript Rahmen. Der Player funktioniert perfekt in allen modernen Browsern.

Dieser Spieler ist der einzige auf der Liste, der bezahlt wird. Er ist alles wert $5 , aber es funktioniert perfekt. Der Player verfügt über viele nützliche Funktionen, wie z. B. den Schutz Ihrer Audiodaten vor Abhören durch Signal-Overlay, was für den kommerziellen Einsatz sehr gut ist.

Quelle: http://codecanyon.net/item/universal-html5-audio-player

IN beteiligte Technologien HTML5 Und Blitz, was es sehr leicht macht ( 10 KB), eine robuste browserübergreifende Lösung zum Streamen von Audio.
Möchten Sie wissen, was Sie damit machen können? Soundmanager 2? Besuchen Sie uns, um die Demo anzusehen!