HTML5-Video

HTML5 Rocks

Einführung

Das Video-Tag ist eine der im Zentrum des Interesses stehenden HTML5-Funktionen. Oft wird das Video-Tag in den Medien als Alternative zu Flash dargestellt, doch tatsächlich geht es sogar noch darüber hinaus. Wenngleich es noch nicht lange zu den übrigen universellen HTML-Tags zählt, haben seine Funktionsmöglichkeiten und der browserübergreifende Support in beeindruckender Geschwindigkeit zugenommen. Wie Sie in dieser Anleitung sehen werden, liegt sein Hauptvorteil in der natürlichen Integration in die anderen Ebenen des Web-Entwicklungsstapels, wie CSS und JavaScript sowie die anderen HTML-Tags.

In dieser Anleitung erhalten Sie grundlegende Kenntnisse über das Video-Tag und verschiedene Beispiele für unterschiedliche Integrationen in andere HTML5-Funktionen, beispielsweise <canvas>.

1. Die Auszeichnung

Die folgenden Zeilen sollten ausreichen, um auf Ihrer Website ein funktionierendes HTML-Video zu integrieren.

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

In diesem Snippet wird das <source>-Tag verwendet, mit dem Sie mehrere Formate als Fallback-Typen aufnehmen können für den Fall, dass der Browser des Nutzers eines davon nicht unterstützt. Mehr zu diesem Thema im nächsten Abschnitt.

Sie können auch ein einzelnes Videoformat nutzen, bei dem die Syntax dem Bild-Tag stark angeglichen wird. Dies wird in naher Zukunft, wenn alle Browser ein gemeinsames Videoformat unterstützen, die meistgenutzte Syntax sein.

<video src="movie.webm"></video>

Für den Moment konzentrieren wir uns auf den erstgenannten Fall, der derzeit geläufiger ist. Der wichtigste Punkt, den Sie nicht vergessen sollten: Stellen Sie sicher, dass Ihr Server Videodateien mit dem korrekten MIME-Typ im Content-Type-Header bereitstellt. Falls nicht, funktionieren die Videos möglicherweise nicht ordnungsgemäß, selbst wenn sie auf einer lokalen Kopie Ihrer Website noch funktionierten. In einer Apache-Datei "httpd.conf" genügt es, diese Zeilen hinzuzufügen:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Wenn Ihre App in einer Google App Engine-App bereitgestellt wird, müssten Sie der Datei "app.yaml" jeweils einmal für jedes Format Code hinzufügen, der etwa wie folgt aussieht:

- url: /(.*\.ogv)
  static_files: videos_folder/\1
  mime_type: video/ogg
  upload: videos_folder/(.*\.ogv)

Denken Sie zur Verbesserung der clientseitigen Leistung bei der Handhabung mehrerer Formate unbedingt daran, das type-Attribut in den source-Tags anzugeben. Auf diese Weise kann der Browser festlegen, welches Format heruntergeladen und wiedergegeben werden soll. Die Formate, die er nicht wiedergeben kann, lädt er also mit anderen Worten nicht herunter, um so die Leistung der Website zu erhöhen.

2. Videoformate

Stellen Sie sich ein Videoformat als ZIP-Datei vor, die den codierten Video-Stream und Audio-Stream enthält. Die drei Formate, die Sie für das Web beachten sollten, lauten "webm", "mp4" und "ogv":

  • .mp4 = H.264 + AAC
  • .ogg/.ogv = Theora + Vorbis
  • .webm = VP8 + Vorbis

Die Geschwindigkeit bei der Entwicklung des Video-Tags ist ermutigend. Safari war vor nur einem Jahr noch der einzige Browser, der in seiner stabilen Version das Video-Tag unterstützte. Heute unterstützen alle modernen Browser HTML5-Video, darunter auch der demnächst verfügbare IE9. Für Firefox, Chrome und Opera wurde in Bezug auf Codecs vereinbart, über das WebM-Projekt zusätzlich ".webm" als gemeinsames Videoformat zu unterstützen. Internet Explorer wird dieses ebenfalls unterstützten, sofern der Codec auf dem Computer installiert wird. Wir hoffen, dass dies in Zukunft keine zwingende Voraussetzung mehr sein wird.

Hinweis: Beim Verfassen dieses Artikels unterstützt Safari das ".webm"-Format nicht.

Hier können Sie sehen, wie es aussieht, wenn Ihr Browser nur ein oder zwei der erwähnten drei Formate rendern kann (wenn Sie alle drei sehen, können Sie sich glücklich schätzen!):

Beim Verfassen dieses Artikels (August 2010) ist dies das Snippet mit der sichersten Kombination an Formaten, sodass Sie sicher sein können, dass Ihr Video in allen Browsern angezeigt wird:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Hinweis: Aufgrund eines Fehlers im iPad müssen Sie ".mp4" als erste Option angeben, damit das Video auf diesem Gerät geladen wird. Dies gilt, bis der Fehler behoben ist.

Wie bereits erwähnt, haben sich fast alle Browseranbieter darauf geeinigt, ein gemeinsames Videoformat zu unterstützen. In weniger als einem Jahr wird daher höchstwahrscheinlich dieser Code im Web verwendet werden:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Zu den größten Bedenken bei der Verwendung des MP4-Formats zählt die Tatsache, dass sein Video-Codec (h.264) kein offener Codec ist und die Lizenzen, die ein Unternehmen für seine Nutzung bezahlen müsste, sehr komplex sind. Weitere Informationen zu diesem Format finden Sie in diesem Kapitel zu Video.

Ein weiteres Problem mit dem MP4-Format besteht darin, dass das type-Attribut je nach dem für die Codierung des Videos verwendeten Profil spezifischer sein muss als bei anderen Formaten. Obwohl es in aller Regel "avc1.42E01E, mp4a.40.2" lautet, sollten Sie nochmals in dieser Profilliste nachsehen, um sich zu vergewissern.

Selbst wenn Microsoft den Support des Video-Tags sowie anderer HTML5-Elemente in der demnächst verfügbaren IE-Version, also IE9, angekündigt hat, verzeichnet dieser Browser unter den Nutzern eine niedrigere Migrationsrate zu neueren Versionen als die anderen wichtigen Browser. Daher folgender Abschnitt:

3. Was geschieht mit aktuellen IE-Versionen, die das Video-Tag nicht unterstützen?

Flash-Fallback

Sie können auch Flash als Fallback verwenden. Je nach dem Format Ihres Videos müssen Sie dieses unter Umständen erneut codieren, damit es ein mit Flash Player kompatibles Format besitzt. Die gute Nachricht ist, dass Adobe sich dazu verpflichtet hat, das webm-Format in Flash Player zu unterstützen. Ein Zeitplan steht hierfür jedoch noch nicht fest. Der größte Pferdefuß dieser Lösung im Vergleich zum Google Chrome Frame-Plug-in besteht darin, dass Sie mit Flash Player als eingeschränkter Version einer benutzerdefinierten Benutzeroberfläche oder von erweiterten Funktionen, die Sie für Ihr Video-Tag erstellt haben, Vorlieb nehmen müssen. Die Details dieser Technik finden Sie in der Kurzanleitung zur Implementierung des HTML5-Audio-Tags.

4. Videos codieren

Falls Sie Ihre bestehenden Videos codieren müssen, damit sie die im vorherigen Abschnitt erwähnten Formate aufweisen, können Sie mithilfe von Miro Video Converter für Windows und Mac problemlos die Konvertierung in das benötigte Format durchführen. Das Programm bietet Ihnen zwar nicht die Möglichkeit zur Optimierung zahlreicher Einstellungen, doch liefert es die meisten gängigen Ausgaben für das Web, darunter auch die drei Formate, die wir in dieser Anleitung nutzen. Diese Software ist genauer gesagt ein Wrapper für ffmpeg und ffmpeg2theora. Sie können sie unter Windows, Mac und Linux über die Befehlszeile ausführen und weitere Parameter angeben. Weitere Informationen zu diesem Tool finden Sie unter divintohtml5.org.

5. Der interessante Teil

Wie bereits in der Einführung erwähnt, liegt der Hauptvorteil des zur HTML5-Familie gehörenden Video-Tags in der Integration in die anderen Ebenen des Web-Entwicklungsstapels. In den folgenden Beispielen erhalten Sie einen Überblick über die Einsatzmöglichkeiten des Video-Tags.

5.1. Video und anderes HTML

Es können nun alle gängigen HTML-Attribute im Video-Player verwendet werden. Im folgenden Snippet wird beispielsweise tabindex verwendet, damit über die Tastatur auf den Player zugegriffen werden kann. Es gibt neue Attribute wie loop für Wiederholungen und autoplay für die automatische Wiedergabe, die im Video-Tag verwendet werden können und auch für das Audio-Tag gängig sind. Mit dem poster-Attribut wird angegeben, welches Bild angezeigt wird, wenn das Video am Anfang geladen wird, und mit controls schließlich, dass keine benutzerdefinierten Steuerelemente erstellt werden, sondern dass der Browser automatisch Steuerelemente rendern soll. Es gibt auch ein preload-Attribut, mit dem das Video im Hintergrund heruntergeladen werden kann, sobald die Seite geladen wird, selbst wenn seine Wiedergabe noch nicht begonnen hat.

<video poster="star.png" autoplay loop controls tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

Durch die vollständige Integration des Video-Tags als natives Browserelement werden einige Probleme beseitigt, die Sie möglicherweise in der Vergangenheit mit eingebetteten Playern von Drittanbietern hatten, beispielsweise dass Dropdown-Menünamen und iFrames sich im Player überlagerten oder es zu seltsamen Verhaltensweisen kam, wenn die Größe der anderen HTML-Elemente um das Video herum dynamisch geändert wurde.

Da das Video nicht als eingebettetes fremdes Objekt behandelt wird, gibt es einige weitere Vorteile mit Auswirkungen auf die Nutzererfahrung. Selbst wenn der Fokus auf dem Player selbst liegt, kommt es bei Aktionen wie dem Scrollen auf einer Seite oder Tastenanschlägen auf der Tastatur beispielsweise zu keinerlei Funktionsbeeinträchtigungen.

Hinweis: Falls Sie versuchen, mehrsprachige Dokumente zu schreiben, um die XHTML-Syntax im Kontext von HTML5 beizubehalten, sollten die Attribute in Ihrem Code etwa folgendermaßen aussehen:

<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

5.2. Video und JavaScript

Das Video-Tag verfügt über eine Reihe von Attributen und Methoden, mit denen Sie Ihr Video im JavaScript-Code genau steuern können. In folgendem Beispiel können Sie sie in Echtzeit sehen.

Wie bei jedem anderen HTML-Element können Sie gängige Ereignisse an das Video-Tag anhängen, beispielsweise Ziehereignisse, Mausereignisse, Fokusereignisse und so weiter. Das Videoelement verfügt jedoch über eine Reihe von neuen Ereignissen, anhand derer erkannt und gesteuert wird, wann das Video abgespielt, angehalten oder beendet wird. Da das Laden einer Videoressource viele Vorkehrungen umfassen kann, gibt es zahlreiche Ereignisse, mit denen der Ladeprozess sowohl auf Netzwerkebene ("loadstart", "progress", "suspend", "abort", "error", "emptied", "stalled") als auch auf Zwischenspeicherungsebene (loadedmetadata, "loadeddata", "waiting", "playing", "canplay", "canplaythrough") genau gesteuert wird.

Auf einfachster Ebene können Sie als Einstieg für Ihre Beschäftigung mit dem Video das "canplay"-Ereignis anhängen.

video.addEventListener('canplay', function(e) {
  this.volume = 0.4;
  this.currentTime = 10;
  this.play();
}, false);

Im Internet sind im Moment verschiedene benutzerdefinierte Player-Steuerelemente verfügbar. Im folgenden Beispiel verwenden wie einige Elemente, um zwei Videos gleichzeitig zu steuern und zudem den Vorspuleffekt mit dem playbackRate-Attribut zu emulieren. Über den Schieberegler können Sie die Lautstärke zwischen den Videos umschalten.

5.3. Video und CSS

Wie Sie vielleicht schon vermutet haben, kann das Video-Tag mit zusätzlichen CSS-Stilen, wie Kanten, Deckkraft und so weiter, versehen werden, da es ein DOM-Spitzenmerkmal ist. Das Tolle daran ist aber, dass Sie es auch mit den neuesten CSS3-Eigenschaften wie Reflexionen, Masken, Farbverläufen, Transformationen, Übergängen und Animationen versehen können.

Halten Sie den Mauszeiger über das nächste Video, um einige davon in Aktion zu sehen.

#video-css.enhanced {
  border: 1px solid white;
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */

  -moz-transform: translate(0, 10px);  /* FF3.5+ */
  -o-transform: translate(0, 10px);  /* Opera 10.5 */
  -webkit-transform: translate(0, 10px);  /* Saf3.1+, Chrome */
}

5.4. Video und Canvas

Canvas ist ein weiteres HTML5-Element, das bei der gemeinsamen Nutzung mit dem Video-Tag eine Fülle von Möglichkeiten bietet.

Im folgenden Beispiel machen wir uns zwei Funktionen des <canvas>-Elements zunutze, um Bilder zu im- und exportieren. Die erste ist die drawImage-Methode, mit der Sie Bilder aus drei unterschiedlichen Quellen importieren können: aus einem Bildelement, einem weiteren Canvas-Element und einem <video>-Element! Dies bedeutet, dass bei jeder Ausführung dieser Methode der aktuelle Frame im Video importiert und im Canvas gerendert wird.

Die zweite Funktion des verwendeten <canvas>-Tags ist die toDataURL-Methode, mit der Sie den Inhalt des Canvas-Elements in ein Bild exportieren können. Klicken Sie im folgenden Video auf die Wiedergabeschaltfläche, um zu sehen, wie alle anderthalb Sekunden ein Bild aus dem Video erstellt wird. Das von uns zum Import bzw. Export verwendete Canvas-Element ist verborgen.

Im folgenden Code können Sie sehen, wie wir mit der "drawImage"-Methode, bei der das Videoelement als Quelle verwendet wird, einfach ein Intervall erstellen, das alle anderthalb Sekunden ausgeführt wird.

video_dom.addEventListener('play', function() {
  video_dom.width = canvas_draw.width = video_dom.offsetWidth;
  video_dom.height = canvas_draw.height = video_dom.offsetHeight;
  var ctx_draw = canvas_draw.getContext('2d');
  draw_interval = setInterval(function() {
    // import the image from the video
    ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
    // export the image from the canvas
    var img = new Image();
    img.src = canvas_draw.toDataURL('image/png');
    img.width = 40;
    frames.appendChild(img);
  }, 1500)
}, false);

Im folgenden Beispiel gehen wir noch einen Schritt weiter. Wenn Sie die Häufigkeit erhöhen können, mit der das Bild aus dem Video importiert und gerendert wird, können Sie die Frame-Rate desselben Video im Canvas-Element emulieren. Auf diese Weise können Sie im Canvas-Element eine Vielzahl ausgefallener Transformationen ausführen, so als würden Sie dies im Video tun.

Auf der linken Seite können Sie sehen, wie das ursprüngliche Video abgespielt wird. In der Mitte ist ein Canvas-Element vorhanden, mit dem wir die Bilder alle 33 Millisekunden importieren. Auf der rechten Seite ist ein zweites Canvas-Element vorhanden, das allen Transformationen unterzogen wird, während es gleichzeitig die Bilder aus dem ersten Canvas-Element importiert. Der einzige Grund für die Verwendung von zwei Canvas-Elementen besteht darin, dass die Leistung deutlich besser ist als bei nur einem Canvas-Element, das gleichzeitig Bilder importiert und transformiert.

Dieselbe Bildimporttechnik lässt sich auch auf WebGL anwenden. Mit WebGL könnten Sie beispielsweise die Frames eine Videos importieren und sie in einem sich drehenden 3D-Würfel rendern. Auf der MDN-Website finden Sie weitere Details zu dieser Art von Implementierung.

5.5. Video und SVG

SVG (Scalable Vector Graphic) bietet eine programmatische Möglichkeit zum Rendern und Bearbeiten von Vektorgrafiken, verfügt aber auch über weitere Funktionen wie SVG-Filtereffekte. Mit diesen Filtern können Sie ein spezifisches DOM-Element als Ziel festlegen und einige tolle Effekte wie Weichzeichnen, Mischen, Kacheln und so weiter anwenden. Beim Verfassen dieses Artikels (August 2010) unterstützen Firefox 4 und IE9 Inline-SVG. Hierdurch kann mit HTML und CSS auf das Video-Element abgezielt werden. Für dieses Beispiel verwenden wir JavaScript und Canvas, damit das Video auch in Browsern abgespielt werden kann, die Inline-SVG noch nicht unterstützen:

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <defs>
    <filter id="myblur"> 
      <feGaussianBlur stdDeviation="1" /> 
    </filter>
  </defs>
</svg>
<style>
  video { filter:url(#myblur); border: 2px solid red; }
</style>

Anklicken, um den Weichzeichnungsfilter umzuschalten

Comments

0