Videos in Websites einbinden

Es gibt viele Wege Videos in Webseiten einzubinden. Die zwei wichtigsten werden Flash-Videos mit HTML einbinden und die neue HTML5-Videotechnik sein.

 
HTML5 Video:

Beim Einbinden eines Videos mit HTML5 muss man darauf achten, dass nicht alle HTML5 fähigen Browser die gleichen Videoformate wiedergeben können.

 Das heißt, man muss das Ausgangsvideo in die drei gängigsten Formate konvertieren (Ogg Theora, Mpeg4 und WebM).Optimalerweise werden alle drei Formate dann mit dem HTML5 Tag <Video …>  gleichzeitig eingebunden (siehe unten).

Die Konvertierung des Ausgangsvideos kann mit einem Konverter, den es kostenlos gibt, konvertiert werden. http://www.freemake.com/de/free_video_converter/

Dazu ließt man das Quellvideo ein und der Konverter gibt es in drei Formaten wieder aus.

 

So wird ein Video beispielsweise eingebunden:

<video controls width=640 height=426>
   <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
   <source src="video.webm" type='video/webm' >
   <source src="video.mp4" type='video/mp4'>
<p>Ihr Browser unterstützt kein HTML5 (Alternativtext für alte Browser)</p>
</video>

 

HTML-embed:
<embed src="video.swf" width="640" height="480">
 

Bzgl. der Bereitstellung von Filmen (betrifft auch Audio-Dateien), ist es vielleicht zum Vorteil die Unterschiede von "Download, Progressiver Download und Streaming" zu kennen.

  • Streaming: Hier wir keine Datei lokal auf der Festplatte gespeichert, sondern direkt im Browser abgespielt. Beim nächsten Besuch der Seite muss die Datei aber neu geladen werden.
  •  Download: Eine Datei muss komplett lokal auf die Festplatte geladen werden um ihn sich angucken zu können. Danach kann man aber direkt vorspulen, etc. Ein neues Laden ist nicht notwendig da man alle nötigen Dateiinformation hat.
  •  Progressiver Download: Hier wird ebenfalls eine Datei progressiv lokal auf die Festplatte heruntergeladen. Man kann Sie bereits abspielen auch wenn sie noch nicht vollständig geladen ist. Ein Vor-Spulen ist allerdings nur soweit möglich wie der Download bereits fortgeschritten ist.

Vorteile von Videos via YouTube
  • kein verbrauch von Speicherplatz auf dem eigenen Webserver
  • wenn man bereits auf dem Chanel ist, kann man alle weiteren Videos direkt ansehen
  • Einbindung sehr leicht und komfortabel
  • relativ viele Einstellungs- und Anpassungsmöglichkeiten
 
 
Weiterführende Links:
Status: 
Von Nutzer/n erstmalig erstellt
0
Eigene Bewertung: Keines

Kommentare

Guter Artikel

Vllt könnten noch die Vor- und Nachteile von Flash gegenüber HTML5 abgefragt werden.

Hier ein guter Artikel dazu: http://blog.sybit.de/2012/02/video-tag-vs-flash-der-ring-ist-eroffnet/

 Bzgl. der Bereitstellung von

 Bzgl. der Bereitstellung von Filmen (betrifft auch Audio-Dateien), ist es vielleicht zum Vorteil die Unterschiede von "Download, Progressiver Download und Streaming" zu kennen.

  • Streaming: Hier wir keine Datei lokal auf der Festplatte gespeichert, sondern direkt im Browser abgespielt. Beim nächsten Besuch der Seite muss die Datei aber neu geladen werden.
  •  Download: Eine Datei muss komplett lokal auf die Festplatte geladen werden um ihn sich angucken zu können. Danach kann man aber direkt vorspulen, etc. Ein neues Laden ist nicht notwendig da man alle nötigen Dateiinformation hat.
  •  Progressiver Download: Hier wird ebenfalls eine Datei progressiv lokal auf die Festplatte heruntergeladen. Man kann Sie bereits abspielen auch wenn sie noch nicht vollständig geladen ist. Ein Vor-Spulen ist allerdings nur soweit möglich wie der Download bereits fortgeschritten ist.

 

Ich hoffe mal das ich nicht zu sehr abscheife. Aber es kann manchmal auch sehr weit entfernt sein von dem eigentlichen Thema.

 

Da HTML5 momentan State of

Da HTML5 momentan State of the Art ist und vermutlich thematisiert wird, sollte man sich folgendes anschauen: Ein Tutorial zur Video-Einbindung, mit kurzer Erläuterung warum es sich empfiehlt  momentan mehrere Formate eines Filmes anzubieten und welche Funktionen einem Video mitgegeben werden können.

http://www.html-seminar.de/html-5-video.htm