Start > Netzthemen > Videos in HTML

Videos in HTML 4 und HTML 5 ohne Javascript!

Diese Abhandlung testet und demonstriert die Einbindung von Videos ohne JavaScript in HTML 4 und HTML 5 [1]. Die Möglichkeiten sind mit Quelltext dargestellt. Für HTML 4, welches Videos nicht nativ einbinden kann, werden Zusatztechnologien (Plug-Ins) wie QuickTime und Flash verwendet, nicht jedoch Java, JavaScript oder SilverLight. Für HTML 5 kommt naturgemäß das native <video>-Element zum Einsatz. Die Demo-Videos liegen in den Formaten OGG (Theora/Vorbis) und MPEG-4 (H.264/AAC) vor, so daß jeder Browser zumindestens ein Video abspielen können sollte.

Welche Codecs abgespielt werden, hängt letztendlich vom Browser und den installierten Plug-Ins ab; Für HTML 5 unterstützen Opera und Firefox den offenen Standard OGG (lizenzfrei!), Apples Safari hingegen H.264 (Apple hält selbst Patente an H.264), der IE 8 hingegen keinen der beiden Codecs.

Bei einer Beispielinstallation mit VLC V1.0.5 (Plug-In) und Opera 10.5 spielte Opera alle Videos ab (bis auf ActiveX, das nur der IE versteht): über HTML 5 nativ das OGG-Format, über den Flash-Player oder VLC das MPEG-4-Format.

Unter der Variante Kombination ist der Programmabschnitt notiert, der die wichtigsten Abspielmöglichkeiten des Browsers kombiniert prüft; das zugehörige Video sollte in fast allen Browser/Plug-In-Kombinationen zu sehen sein, selbst in einem RSS-Leser oder auf einem iPhone/iPad.

  1. Flash
  2. QuickTime
  3. HTML 5
  4. Kombination
  5. Literatur

Flash

Flash via <object> und ActiveX (IE < 7)

Diese Video-Einbindung sollte für den IE bis Version 6 funktionieren. Andere Browser interpretieren ActiveX nicht.

Ihr Browser unterstützt das Objekt nicht!
<object width="320" height="204" classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0">
  <param name="movie" value="video.mp4">
  <param name="quality" value="high">
  <param name="scale" value="exactfit">
  <param name="menu" value="true">
  <param name="bgcolor" value="#000000">
  Ihr Browser unterstützt das Objekt nicht!
  </object>

Flash via <object> type video/mp4

Ihr Browser unterstützt das Objekt nicht!
<object width="320" height="204" type="video/mp4" data="video.mp4">
  <param name="movie" value="video.mp4">
  <param name="quality" value="high">
  <param name="scale" value="exactfit">
  <param name="menu" value="true">
  <param name="bgcolor" value="#000000">
  Ihr Browser unterstützt das Objekt nicht!
  </object>

Flash via <object> type application/x-shockwave-flash und zusätzlichem Flash-Player-Programm

Ist Flash als Plug-In installiert, übernimmt der Player das Abspielen des Videos.

Ihr Browser unterstützt das Objekt nicht!
<object width="320" height="204" type="application/x-shockwave-flash" data="player.swf?autostart=true&image=video.jpg&file=video.mp4">
  <param name="movie" value="player.swf?autostart=true&image=video.jpg&file=video.mp4">
  Ihr Browser unterstützt das Objekt nicht!
  </object>

Flash via <embed> type video/quicktime

Achtung: <embed> ist ein proprietäres HTML-Element und kein offizieller Bestandteil.

Ihr Browser unterstützt das Objekt nicht!
<embed width="320" height="204" type="video/quicktime" src="video.mp4" quality="high" scale="exactfit" bgcolor="#000000" swLiveConnect="false" pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
<noembed>Ihr Browser unterstützt das Objekt nicht!</noembed>

Flash via <embed> type video/mp4

Achtung: <embed> ist ein proprietäres HTML-Element und kein offizieller Bestandteil.

Ihr Browser unterstützt das Objekt nicht!
<embed width="320" height="204" type="video/mp4" src="video.mp4" quality="high" scale="exactfit" bgcolor="#000000" swLiveConnect="false" pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
<noembed>Ihr Browser unterstützt das Objekt nicht!</noembed>

Quick Time

Quick Time via <object> und ActiveX

Diese Video-Einbindung sollte nur durch den IE bis V.6 dargestellt werden. Andere Browser interpretieren ActiveX nicht.

Ihr Browser unterstützt das Objekt nicht!
<object width="320" height="195" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
  <param name="src" value="video.mp4">
  <param name="autoplay" value="true">
  <param name="showlogo" value="false">
  Ihr Browser unterstützt das Objekt nicht!
  </object>

Quick Time via <object> type/quicktime

Ihr Browser unterstützt das Objekt nicht!
<object width="320" height="195" type="video/quicktime" data="video.mp4">
  <param name="src" value="video.mp4">
  <param name="autoplay" value="true">
  <param name="showlogo" value="false">
  Ihr Browser unterstützt das Objekt nicht!
  </object>

Quick Time via <object> type video/mp4

Ihr Browser unterstützt das Objekt nicht!
<object width="320" height="195" type="video/mp4" data="video.mp4">
  <param name="src" value="video.mp4">
  <param name="autoplay" value="true">
  <param name="showlogo" value="false">
  Ihr Browser unterstützt das Objekt nicht!
  </object>

Quick Time via embed und type video/mp4

Achtung: <embed> ist ein proprietäres HTML-Element und kein offizieller Bestandteil.

Ihr Browser unterstützt das Objekt nicht!
<embed width="320" height="195" type="video/mp4" src="video.mp4"></embed>
<noembed>Ihr Browser unterstützt das Objekt nicht!</noembed>

HTML 5 via <video>

Die erste direkte Video-Unterstützung in HTML ohne Drittanbieter wie Adobe, Apple etc. Versteht Ihr Browser HTML 5, sollte jetzt hier ein Video zu sehen sein. Auf der Testseite zu HTML 5, CSS, SVG und Canvas gibt es auch Audio-Dateien zu hören.

<video width=320 height=180 poster="video.jpg" controls autoplay>
  <source src="video.ogv" type="video/ogg"></source>
  <source src="video.mp4" type="video/mp4"></source>
  Ihr Browser unterstützt das Objekt nicht!
  </video>

Kombination

Diese Kroc Camen [2] entlehnte Konstellation kombiniert die wesentlichen unterschiedlichen Möglichkeiten, Videos ohne JavaScript abzuspielen. Nicht alle der oben aufgeführten Varianten finden sich hier allerdings wieder, um die Prüflogik nicht zu komplex zu gestalten.

Der Ablauf: Zuerst wird versucht, ein Video über das HTML-5-Element <video> abzuspielen. Scheitert dies, wird der Versuch über QuickTime unternommen. Funktioniert auch dies nicht, wird der Flash-Player aktiviert. Versagt auch dieser Ansatz, wird ein Platzhalter-Bild aus dem Video angezeigt. Zusätzlich kann der Benutzer das Video herunterladen, um es mit einem lokalen Programm abzuspielen.

Video herunterladen:
Open Format Ogg Theora Vorbis (OGV)
Apple iTunes MPEG 4 (MP4)

<!-- first try HTML5 playback. if serving as XML, expand
`controls` to `controls="controls"` and autoplay likewise -->
<video width=320 height=180 poster="video.jpg" controls autoplay>
  <source src="video.ogv" type="video/ogg"></source>
  <source src="video.mp4" type="video/mp4"></source>

  <!-- IE only QuickTime embed: IE6 is ignored as it does not
  support `<object>` in `<object>` so we skip QuickTime
  and go straight to Flash further down. the line break after the
  `classid` is required due to a bug in IE.
  Notice that QuickTime is 15 px higher and Flash 24 px higher.
  This is because the controls for these fallbacks don't overlay
  the video like HTML5 does. Flash height is specific to JWPlayer,
  YouTube's controls are taller -->
  <!--[if gt IE 6]>
  <object width="320" height="195" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
  [endif]-->

  <!-- non-IE QuickTime embed (hidden from IE): the self-closing
  comment tag allows non-IE browsers to see the HTML whilst being
  compatible with serving as XML -->
  <!--[if !IE]><!-->
  <object width="320" height="195" type="video/quicktime" data="video.mp4">
  <!--<![endif]-->
    <param name="src" value="video.mp4">
    <param name="autoplay" value="true">
    <param name="showlogo" value="false">

  <!-- fallback to Flash -->
  <!-- Firefox uses `data` attribute above, IE/Safari uses param below -->
  <object width="320" height="204" type="application/x-shockwave-flash" data="player.swf?autostart=true&image=video.jpg&file=video.mp4">
    <param name="movie" value="player.swf?autostart=true&image=video.jpg&file=video.mp4">

  <!-- fallback image -->
  <!-- download links are below the video. warning: putting anything more
  than the fallback image in the fallback may trigger an iPhone OS3+
  bug where the video will not play -->
  <img src="video.jpg" alt="Grabräuber" title="Video kann nicht angezeigt werden. Sie können es aber weiter unten herunterladen.">
  </object><!--[if gt IE 6]><!-->
  </object><!--<![endif]-->
  </video>
<p>Video herunterladen: <a href="video.ogv">Open Format Ogg Theora Vorbis (OGV)</a> | <a href="video.mp4">Apple iTunes <abbr title="Moving Picture Experts Group">MPEG</abbr> 4 (MP4)</a></p>

Quellen und weiterführende Literatur

  1. W3C: HTML 5: The Video Element
  2. Kroc Camen: Video for Everybody
  3. Mark Pilgrim: Video on the Web
© 2010, 2010 asdala.de: Kon­takt & Daten­obhut