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 gestoßen.

Carmen von Video for everybody hat seinen Code inzwischen aktualisiert. Schau also am besten direkt auf video for everybody 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.

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 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 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 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 (Endung .mp4, wird von Youtube verwendet)
• In ogg theora kodieren (Endung .ogv)

Wenn du also Videos auf deiner Seite wirklich sauber einbinden willst, dann lad den generischen Codeschnipsel 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 stammt.

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