| Videos in Webseiten einbinden | ||||
|---|---|---|---|---|
| Autor | IRvD | Bewertung :  |
||
| Datum | 17.06.2012 |
|
||
| Vote-Teilnehmer | 1 | |||
| Gesehen von | 992 | 0 Kommentare | ||
| Beschreibung | ||||||||||||||||||||||||||||||
| Tipp 1 Video als Link einfügen Ihr habt ein Video und möchtet es mehreren Besuchern auf der Webseite zeigen. Die einfachste Möglichkeit: Ladet die Video-Datei auf den Server und setzt einen Link zur Video-Datei. Das sähe dann so aus:
Dadurch wird das Video allerdings nicht eingebunden sondern tatsächlich nur verlinkt. Das abspielen übernimmt dann jeh nach Betriebssystem ein meist vorhandener Player, beispielsweise der Mediaplayer oder VLC Player. Ist kein Player installiert bietet der Browser meist die Möglichkeit das Video zu speichern. Tipp 2 FLV (Flash Video) vom eigenen Server abspielen Um ein Video im FLV Format abspielen zu können muss auf dem Server ein FLV Player installiert sein wie etwa der JWPlayer, unter anderem muss ein Flash Plugin auf dem Computer installiert und aktiviert sein wie etwa der Adobe Flash Player. Wenn ihr den Player und das Video im FLV Format im selben Ordner auf dem Server abgelegt habt, könnt ihr den Aufruf eurer so Seite so vornehmen:
Befinden sich HTML-Datei und die Videodateien in unterschiedlichen Verzeichnissen, dann gebt den Pfad zum entspechenden Unterordner in den src-Angaben an. In diesem Beispiel wären das die Bereiche: file=video.flv Tipp 3 HTML5 Attribut nutzen Seit HTML5 bietet sich unkompliziert das video-Element an. Die möglichen Attribute sind weitgehend selbsterklärend. Um bei inkompatiblen Browsern eine Fehlermeldung auszugeben gebt ihr diese ebenfalls an. Das sieht so aus:
Unter src gebt ihr den Dateinamen und den Pfad zum Video an. Die Attribute width und height steuern die Größe in der das Video auf der Seite eingebettet wird. Das Attribut controls zeigt die Steuerelemente an. Unter poster gibt man den Dateinamen und das Verzeichnis an in dem sich ein Vorschaubild befindet das den Besuchern vor dem abspielen des Videos gezeigt werden soll. Weitere mögliche Attribute sind autoplay für das sofortige starten des Videos beim Aufruf der Seite. Und autobuffer lädt das Video im Hintergrund - auch wenn das Video nicht abgespielt wird. Wenn ihr das Attribut loop einfügt startet das Video beim erreichen des Endes erneut. Tipp 4 HTML5 mit Flash-Fallback Fallback bedeutet das dem Browser beide Varianten angeboten werden. Jeh nach Plattform und Aktualität kann der Browser auf die Möglichkeit zurückgreifen, die er darstellen kann. Mit dieser Variante deckt ihr eine möglichst große Zielgruppe ab. Sowohl das klassische Flash-Format und der HTML5-Standard sind abgedeckt, und die technischen Gegebenheiten von den meisten mobilen Geräten berücksichtigt.
Versteht der Browser HTML5, greift er auf den video-Tag zu. Ältere Generationen ignorieren diesen Tag können aber stattdessen meist die Flash-Datei darstellen. Damit das Video nicht vielleicht doppelt auf der Seite zu sehen ist, versteckt ihr die Angabe für den Flash-Fallback in der HTML5 Anweisung. So könnt ihr die doppelte Darstellung weitestgehend ausschließen. Tipp 5 Der richtige Video-Codec - das richtige Format Das richtige Format ist wichtig bei allen Möglichkeiten die ihr habt, das Video auf eurer Homepage einzubinden. Damit möglichst alle Besucher auf eurer Seite das Video zu sehen bekommen solltet ihr alle Formate abdecken, die von den verschiedenen Geräten, Betriebssystemen und Browsern in unterschiedlichen Kombinationen vorkommen können. Im Bereich HTML5 unterstützen fast alle Browser das Format MP4 mit H.264. Firefox hingegen setzt auf das OGG-Format. OGG ist ein Container-Format, das Videos wie Audios enthalten kann. Alle gängigen Browser (auch ältere Versionen) sind in der Lage , Flash-Dateien anzuzeigen. Mobile Browser-Versionen für Smartphones und Tabletts hingegen unterbinden zumeist Flash, unterstützen aber HTML-Attribute. Das Format WebM soll das Problem zukünftig lösen und zum übergreifenden Standard werden, was bislang noch nicht der Fall ist. Stellt deswegen eure Videos in verschiedenen Formaten bereit. Die Besucher der Webseite werden es danken. Das geht etwa so:
So das wars erstmal mit diesem Tutorial. MFG: DJ Danby |
||||||||||||||||||||||||||||||
