Videos sauber in Webseiten einbinden (html5)

Ich habe die letzten Wochen mit dem html5 widget experimentiert und bin dabei auf die wundervolle Seite video for everybody [1] gestoßen.

Carmen von Video for everybody hat seinen Code inzwischen aktualisiert. Schau also am besten direkt auf video for everybody [1] vorbei.

Besonders interessant für mich war der code mit youtube integration, weil dadurch die Notwendigkeit entfällt, selbst einen Flash-Player zu hosten.

Um das nochmal zu wiederholen: Die aktuelle Version gibt es auf video for everybody [1].

Das Prinzip dahinter heißt "graceful degradation": Wenn jemand die bestmögliche Technologie nicht hat, wird automatisch und unsichtbar die zweitbeste Möglichkeit genutzt, und wenn er die nicht hat die nächste, bis am Ende ein Download-Link da steht, mit dem selbst Leute mit Textbrowsern die Videos herunterladen und dann z.B. als Text-Video ansehen [2] können.

Auf die Art kann wirklich Jede/r die Inhalte der Webseite nutzen. Jede/r beinhaltet hier Nutzer auch von iPhones uvm.

Ein Beispiel wie der Code dann aussehen kann (das Beispiel hier verwendet youtube als Quelle für das Flash-Video):

Camen von video for everybody hat den code unter cc-by freigegeben und mir auch per E-Mail nochmal bestätigt, dass ich ihn unter die GPL relizensieren (und daher hier verwenden) kann.

Ich habe daraus ein kleines generisches Codeschnipselchen [9] gebastelt.

Um es zu verwenden musst du nur

• den html code rauskopieren,
• Höhe und Breite anpassen (aktuell 480x360; wegen youtube),
• "__VIDEO-URL__" durch den Namen eures Videos ohne Endung ersetzen, und
• Die Youtube URL durch die Youtube URL eures Videos ersetzen.
• Darauf achten, dass dein Server die richtigen MimeTypes schickt (z.B. indem du eine passende ".htaccess" Datei [10] in den Ordner mit den Videos legst - der Dateiname der .htaccess Datei muss mit einem Punkt anfangen!).

Du brauchst dafür außerdem die Videos nur im mp4 und im ogg theora Format (und auf youtube).

• In mp4 kodieren [11] (Endung .mp4, wird von Youtube verwendet)
• In ogg theora kodieren [12] (Endung .ogv)

Wenn du also Videos auf deiner Seite wirklich sauber einbinden willst, dann lad den generischen Codeschnipsel [9] herunter, editier ihn und benutz ihn auf deiner Seite.

Da meine Schaffenshöhe hier sehr gering ist, kannst du ihn wie das Original auch unter cc-by verwenden, musst also nur sagen, dass er von Camen [13] stammt.

PS: Die Zeilenenden sind *nix-Stil ("\n"). Wenn du keine Zeilenumbrüche siehst, probier mal die Datei mit OpenOffice [14] als Text mit Unix-Zeilenenden und "UTF-8" als Kodierung zu öffnen.