Video auf Webseiten

Formate

Es gibt drei essentielle Formate für Videos im Web. 
MP4, OGG und WEBM. 

80% der Videos im Web sind inzwischen MP4-Videos. 

Bei der Verwendung von Videos gibt es zu beachten, dass MP4 ein obligatorisches Element ist. OGG oder WebM sind ergänzende Video-Formate. Für eine maximal mögliche Broswerkompatibilität in HTML5 sind allerdings all diese drei Formate beim Anlegen empfehelenswert. 

Codecs

Codecs sind am Rande erwähnt, denn sie stellen nru selten eine Fehlerquelle dar und müssen dann geändert werden. Viel wichtiger sind die Standard-Codecs der Videoformate in HTML5-fähigen Browsern. Man unterscheided dabei zwischen video und audio codec.

Die Codecs der einzelnen Formate sind: 

MP4
video codec = h.264
audio codec =  AAC 

OGG
video codec = Theora
audio codec = Vorbis

WebM
video codec = VP8
audio codec = Vorbis

Anwendung 

Eingebunden werden Videos mit dem entsprechenden video-tag <video>

<video width="320" height="240">

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  Ihr Browser unterstützt kein Video


</video>

Fallback 

Falls der Browser das Video-element nicht unterstützt oder ein entsprechendes Format nicht angegeben ist. Gibt es neben der Möglichkeit einfach das richtige Format zusätzlich anzubieten noch den Veteranen Flash-Player. Für Browser wie IE8 oder IE7, die kein Video-Tag unterstützen ist es obligatorisch, dass ein FlashVideo zusätzlich eingebunden wird. 

<video width="320" height="240">
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
     <source src="movie.webm" type="video/webm">

     <!-- Flash Fallback -->

     <object width="640" height="360" type="application/x-shockwave-flash" data="flash.SWF">
          <param name="movie" value="flash.SWF" />
          <param name="flashvars" value="controlbar=over&amp;image=POSTER.JPG&amp;file=VIDEO.MP4" />
          <img src="VIDEO.JPG" width="640" height="360" alt="text"  />
     </object>
</video>

Wie werden Videos manipuliert? 

HTML5 Videos lassen sich über Javascript manipulieren. So zum Beispiel das Pausieren, stoppen oder auch das Abfangen, wenn das video einen bestimmten Punkt im Video erreicht

Grundlegende Dinge 

Auch bei Videos im Web gibts paar Regeln bzw. Empfehlungen für Usability und Co. 

1. Videos, die nicht sofort lokalisierbar sind, soltten nicht automatisch starten. (z. B. Video am Ende einer Sidebar)
2. Videos, die sich wiederholen ('loopen'), sollten initial auf stumm sein.  
3. Videos sollten generell eine Abspielleiste besitzen, es sei denn das Video ist ein Stilmittel
4. Die Abspielleiste sollte wenigstens diese Elemente anbieten: Play, Pause, Full Screen, Lautstärkenregelung.

 

Weiterführende Links: http://www.html-seminar.de/html-5-video.htm
 

Tags: 
Bewertung: 
0
Bisher keine Bewertung