HTML5-Videos 10 Dinge, die Designer wissen müssen

Die HTML5-Revolution ist aufregende Webdesigner aus allen Teilen der Welt. Die neuen Spezifikationen unterstützen Dutzende von Elementen und Attributen für die Erstellung semantischer Websites. Diese neuen Funktionen umfassen Multimedia-Tags für Audio- und Videoformate.

In den vergangenen Jahren war ein Flash-basierter Media Player für das Streaming im Web mehr als ausreichend. Diese Technologie ist noch immer erforderlich, um ältere Browser zu unterstützen. Zum Glück haben sich jedoch moderne Standards weiterentwickelt, und die Einbeziehung von HTML5-Video eröffnet Dutzende neuer Möglichkeiten.

In diesem Handbuch möchte ich eine Einführung in das HTML5-Video für das Web bieten. Es bedarf einiger Übung, um den nativen In-Browser-Player und seine gesamte Funktionalität zu verstehen. Und der beste Weg, sich vertraut zu machen, ist mit dem Kopf voran zu tauchen!

1. Arten von Medien

Wenn Sie mit einem Flash-Videoplayer arbeiten, ist es üblich, alle Videoformate in .flv zu verknüpfen. Während dies funktioniert, können die meisten FLV-Dateien die Qualität nicht in der Nähe der erweiterten Dateiformate / Codecs beibehalten. Es gibt drei wichtige Videotypen, die von HTML5 unterstützt werden: MP4, WebM und Ogg / Ogv. Der Dateityp MPEG-4 ist im Allgemeinen in H.264 codiert, wodurch die Wiedergabe in Flash-Playern von Drittanbietern möglich ist. Dies bedeutet, dass Sie keine .flv-Videokopie aufbewahren müssen, um eine Fallback-Methode zu unterstützen! WebM und Ogg sind zwei wesentlich neuere Dateitypen, die sich auf HTML5-Videos beziehen. Ogg verwendet die Theora-Kodierung, die auf dem Open-Source-Standard-Audiodateiformat basiert. Diese können mit der Erweiterung .ogg oder .ogv gespeichert werden.

WebM ist ein von Google veröffentlichtes Projekt, über das Sie auf der WebM Project-Website mehr erfahren können. Das Format wird bereits von Opera, Google Chrome, Firefox 4+ und zuletzt von Internet Explorer 9 unterstützt. Es ist immer noch den meisten Web-Profis unbekannt, aber WebM ist das führende Videomedienformat für die Zukunft des Webvideos.

2. Browserunterstützung

Welche dieser Dateitypen benötigen Sie für Ihre Website? Im Idealfall wären alle 3 großartig, da sie das volle Unterstützungsspektrum bieten. Dies ist jedoch nicht realistisch, und tatsächlich können Sie alle Grundlagen mit nur zwei davon abdecken. Hier ist eine Übersicht, was für jeden Browser funktioniert:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Kein HTML5, nur Flash!

Wenn Sie sich erinnern, habe ich bereits erwähnt, dass die meisten Flash-Video-Player MP4-Dateien unterstützen, sofern sie in H.264 kodiert sind. Daher wird jeder dieser Browser MP4 + Flash als letzten Ausweg einbetten. Das bedeutet, dass Sie nur noch erstellen müssen zwei verschiedene Videoformate zur Unterstützung aller Browser. MP4 für Safari / IE9 und für den Rest die Wahl zwischen WebM oder Ogg.

Meiner Meinung nach empfehle ich dringend, beim WebM-Format zu bleiben. Es hat einige große Namen hinter dem Projekt (nämlich Google) und hat in der HTML5-Community viel an Bedeutung gewonnen. Ogg / Ogv wird zwar unterstützt, wird jedoch bei den kleineren Dateigrößen von WebM wahrscheinlich an Popularität verlieren. Sie können einen Artikel über die Zukunft des Videos im Internet lesen, der von Sean Golliher geschrieben wurde.

3. Einbetten von einfachen HTML5-Videos

Schauen wir uns nun die Syntax an, die zum Einbetten von Beispielcode erforderlich ist. Alles, was wir brauchen, ist das HTML5-Video-Tag, um auf jede Film-URL zu verweisen.

Beachten Sie die Kontrollen und automatisches Abspielen Attribute müssen nicht mit Werten festgelegt werden. Ich habe auch eine Poster Attribut, das vor dem Streaming ein Bild vor dem Video-Player lädt. Dies ist eine übliche Vorschau bei vielen Webplayern.

Wir bieten sowohl MP4- als auch WebM-Formate innerhalb des Videoelements an. Wenn keine dieser Optionen geladen werden kann, wird ein Fehler angezeigt, damit der Benutzer seinen Browser aktualisieren kann.

4. Einen Flash Fallback anbieten

Das obige Beispiel ist perfekt für alle standardkonformen Webbrowser. Wir müssen jedoch auch berücksichtigen, dass die Welt nicht immer auf dem neuesten Stand der Technik ist. Wir müssen Benutzer bei älteren Versionen von Safari, Mozilla Firefox und insbesondere Internet Explorer unterstützen.

Dies erreichen Sie am besten über einen Flash-Fallback-Player. Diese können mit dem hinzugefügt werden einbetten oder Objekt Tags zum Verweisen auf eine .swf-Datei eines Drittanbieters. JW Player und Flowplayer sind zwei kostenlose Open Source-Lösungen, die Sie in Betracht ziehen können. Sie können aber auch Premium-Videoplayer bei ActiveDen ausprobieren, die für 15 bis 20 Dollar günstig sind.

Lassen Sie uns nun den obigen Code optimieren, um einen Fallback-Flash-Player hinzuzufügen, der nahezu jeden vorhandenen Browser unterstützt.

5. Unterstützung mobiler Geräte

Dieses Thema wird nach wie vor stark diskutiert, da die Mobilfunkbranche noch so jung ist. Apple hat MP4 auf Mac- und iOS-Geräten unterstützt. Dies bedeutet, dass Sie MP4-Videodateien nativ auf Ihrem iPad, iPhone oder iPod Touch über die Standard-Video-Benutzeroberfläche streamen können. Dies deckt einen großen Teil des Marktanteils ab.

In letzter Zeit hatten Android-Geräte Schwierigkeiten, diese Unterstützung zu erreichen. Google hat jedoch endlich das .mp4-Webstreaming eingeführt, das jetzt für fast alle mobilen Nutzer von Nutzen ist. Und da Flash hier keine Option ist, ist MP4 die beste verfügbare Lösung. Deshalb möchten Sie zuerst den .mp4-Code einbetten, damit iOS-Geräte die Datei sofort erkennen können.

6. Safari User Agent

Ein Problem, das erwähnt werden muss, ist ein Fehler, der zwischen Flash-Playern und nativem HTML5-MP4-Streaming auf Safari besteht. Da der Browser beide Dateien unterstützen kann, haben Sie möglicherweise Probleme, den HTML5-Videostream anstelle von Flash zu erhalten. Dank dieses großartigen Blogposts auf der TUAW ist es jedoch einfach, Ihren Browser-Benutzeragenten zu ändern.

Dadurch wird Ihre Webseite dazu gezwungen, den Browser als auf einem anderen Gerät ausgeführt zu erkennen. Wahrscheinlich würden Sie sich für ein iPad entscheiden, das KEINE Flash-Wiedergabe unterstützt. Dies ist das einzige große Problem, das Sie möglicherweise beim Testen der nativen MP4- und Flash-Wiedergabemethoden haben.

7. Player-Steuerelemente verwalten

Ob Sie es glauben oder nicht. Es gibt auch Methoden, mit denen Sie HTML5-Video-Player-Steuerelemente bearbeiten können. Sie können dies alles in JavaScript erledigen, indem Sie aus einer Reihe offener Methoden ziehen. Es gibt viel zu viele, um sie hier aufzulisten, aber versuchen Sie, die W3C-Medienelementdokumente nach mehr Details zu durchsuchen.

Um Ihnen eine allgemeine Vorstellung zu geben, hat der Blog von Opera dev einige kurze Tutorials veröffentlicht, die sich hervorragend für Neulinge eignen. Selbst wenn Sie noch nie zuvor JavaScript oder jQuery ausgewählt haben, ist es trotzdem einfach, mit diesem einen Schritt in die richtige Richtung zu gehen. Sie können bestimmte Attribute der Videomedien aufrufen, z. B. stummgeschaltet oder aktuelle Uhrzeit. Anschließend können Sie basierend auf diesen Kriterien Aktionen ausführen (Hintergrund dimmen, Anzeigen anzeigen), indem Sie das DOM in jQuery bearbeiten.

Derselbe Entwickler im Opera-Artikel bietet eine Funktionsdemo ihres gespielten Videoplayers. Die Möglichkeit, Ihre eigenen UI-Steuerelemente anzupassen, ist hervorragend. Es zeigt nur, wie mächtig HTML5-Videos werden.

8. Konvertierung des Videoformats

Dies ist ein weiterer großer Punkt, der wahrscheinlich weniger technisch versierte Einzelpersonen verwirrt. Sie möchten nur Ihre Website auf den neuesten Stand bringen und streamen und müssen sich jetzt mit dem Konvertieren von Videos beschäftigen? Nun, eigentlich ist es gar nicht so schwierig.

Wenn Sie mit MP4 umgehen möchten, das Ihre größte Priorität hat, können Sie HandBrake verwenden, eine kostenlose Open-Source-Lösung, die auf allen 3 großen Betriebssystemen ausgeführt werden kann. Es wird H.264 zusammen mit einigen anderen Codecs unterstützen, was dies zur besten Option für Freebie-Benutzer macht. Wenn Sie das Geld ausgeben müssen, muss ich den Xilisoft-Konverter empfehlen, der im Mac App Store für nur eine Lizenz von 40 USD erhältlich ist.

Es sieht so aus, als ob die WebM-Route das Leben viel einfacher macht. Miro Video Converter ist ein kostenloses Tool für Windows und OS X, das WebM-Dateien in hervorragender Qualität erzeugt. Es kann auch Ogg Theora-Codierungen ausführen, die auch mit ziemlich guter Qualität herauskommen.

9. Einen Web Player erstellen

Videoformate mit HTML5-Spezifikationen sind für Entwickler noch neu. Es gibt offene Protokolle, die nur darauf warten, gespielt zu werden, um benutzerdefinierte Steuerelemente, Schieberegler, Wiedergabe- / Pausensymbole usw. zu ermöglichen. Wenn Sie sich mutig fühlen, lesen Sie in diesem Tutorial nach, wie Sie einen eigenen HTML5-Player erstellen (auf Splashnology veröffentlicht)..

Der Code ist für Neulinge etwas intensiv, da er ein erweitertes CSS-Targeting und ein wenig formale jQuery erfordert. Es gibt andere Frameworks, auf die Sie aufbauen können und die bereits ein individuelles Player-Design bieten. In ähnlicher Weise ist diese Präsentation eine großartige Einführung in die Erstellung eines HTML5-Videoplayers.

Erstellen eines HTML5-Videoplayers

10. VideoJS-Bibliothek

VideoJS ist wahrscheinlich meine Lieblingslösung für HTML5-Videoplayer. Sie benötigen lediglich das selbst gehostete JavaScript- und CSS-Stylesheet, das sich irgendwo in Ihrem Dokument befindet. Dann schreiben Sie den Standard-HTML5-Videocode mit einigen zusätzlichen Klassen zum Skinning. Ich habe ihren Beispielcode unten hinzugefügt:

Wenn Sie ein WordPress-Blog ausführen, können Sie auch das benutzerdefinierte WP-Plugin ausprobieren. Die Bibliothek js / css wird automatisch auf Seiten eingefügt, auf denen Sie HTML5-Video anzeigen. Und das können Sie von jedem Post oder Seiteneditor aus mit Hilfe von Kurzwahlen machen (siehe hier)..

Fazit

Ich hoffe, dieser einführende Leitfaden kann Ihr Interesse an der Zukunft des Webvideos wecken. Da sich immer mehr Benutzer auf das mobile Endgerät konzentrieren, ist es wichtig, dass HTML5-Standards für diese Art von Medien übernommen werden. Das Web sollte einfacher gestaltet werden, damit Entwickler vollständig unterstützte Lösungen schneller erstellen können. Wir würden uns freuen, Ihre Ideen und Vorschläge für die Zukunft von HTML5-Videos zu hören. Wenn Sie etwas mitteilen möchten, können Sie im nachstehenden Diskussionsbereich einen Kommentar hinterlassen.