Allgemeines
Das Thema dieser Seite beschäftigt sich mit der Einbettung/Einbindung von Videos auf Webseiten. Wir möchten versuchen zu erklären wie man Videos mithilfe von verschiedenen Techniken
in Websites einbindet.
Zu jedem Artikel sind Codeausschnitte zu finden, an denen der benutzten Code veranschaulicht werden soll.
Zusätzlich sind grundlegende Fragen im FAQ-Bereich zu finden.
Wer noch mehr Informationen benötigt, der findet das gesamte Projekt auch auf Github. 
Einfache Einbindung (YouTube)
Die simpelste Methode der Einbettung ist das Einbinden von Videos bekannter Videoportalen wie Youtube oder Vimeo. Diese stellen uns einen Iframe-Code zur Verfügung, der in das Markup der HTML Datei der Seite eingebracht wird.
Beispiel:
Der Iframe-Code befindet sich unter dem jeweiligen Video der Seite. Mit einem Klick auf Teilen - Einbetten wird er sichtbar.
Code:
< iframe width="640" height="360" src="https://www.youtube.com/embed/YgM8HVoG2G8" frameborder="0" allowfullscreen>
< /iframe>Erläuterung:
Das Element Iframe bzw. Inlineframe ist ein HTML-Element, welches als Objekt innerhalb einer Webseite plaziert wird. In dem Beispiel das Video welches eingebunden wird.
Die Attribute width und height setzen die Breite und Höhe des Frames.
Source bzw. src steht für die Quelle der Datei und frameborder=0 gibt an, dass unser Rahmen keinen Rand besitzt.
Weitere Iframe Attribute sind auf W3Schools.com zu finden
HTML5 video Element
Die Hyper Markup Language 5 beinhaltet das Multimedia-Element < video>, welches benutzt werden kann um unser Video ohne zusätzliche Plug-Ins einzubetten. Vorraussetzung für das Benutzen von HTML5 ist das die Browserversion möglichst auf den aktuellen Stand ist.
- Firefox 3.5 (oder höher)
- Chrome 4.0 (oder höher)
- Safari 4.0 (oder höher)
- Opera 10.5 (oder höher)
- Internet Explorer 9.0 (oder höher)
- Edge 12.0 (oder höher)
Beispiel:
Code:
< video width="100%" height="480" controls preload="auto" poster=" thumbnail.jpg">
< source src=" meinvideo.webm" type="video/webm">< /source>
< source src=" meinvideo.mp4" type="video/mp4">< /source>
< /video>
Erläuterung:
Das Element video spezifiziert die Einbindung eines Videos, welchem wir verschiedene Parameter zuweisen können.
controls fügt eine Reihe von Videosteuerelementen hinzu.
preload definiert erforderliche Puffermenge des Videos.
poster gibt das Platzhalterbild an, das angezeigt wird bis der Inhalt geladen und gestartet wird.
source enthält den Quellpfad
Weitere video Attribute sind auf W3Schools.com zu finden.
Einbindung durch Zusatztechnologien ( Plug-Ins )
Flash
Mit FLash können wir Videos in den Browser einbinden und aufrufen, selbst wenn dieser den nativen < video>-tag nicht beherrscht. Das bedeutet, dass dieses Plug-In ohne HTML5 auskommt.
Beispiel:
Code:
< object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="830" height="480" id="movie" align="center">
< param name="movie" value="src/sc15OT.swf">
< param name="quality" value="High">
< param name="FlashVars" value="-1">
< param name="Src" value="src/sc15OT.swf">
< param name="WMode" value="Window">
< param name="Play" value="-1">
< param name="Loop" value="0">
< param name="Menu" value="-1">
< param name="AllowScriptAccess" value="always">
< param name="Scale" value="ShowAll">
< param name="EmbedMovie" value="0">
< param name="SWRemote" value="">
< embed src="src/sc15OT.swf" quality="high" bgcolor="#FFFFFF" width="830" height="480" name="movie" align="" type="application/x-shockwave-flash" pluginspage="https://get.adobe.com/de/flashplayer/">
#
< /embed>
< /object>
Erläuterung:
Das Element object erzeugt eingebettetes Objekt in dem HTML Dokument, welches benutzt werden kann um Medien einzubinden.
Die benutzte classid ("clsid:D27CDB6E-AE6D-11cf-96B8-444553540000") Identifiziert die ActiveX-Steuerung für den Browser.
Das codebase-Attribut gibt den Speicherort der ActiveX-Steuerung für den Flash Player an, damit der Browser es automatisch herunterladen kann, wenn es noch nicht installiert ist.
Parameter und anderer Syntax lassen sich auf W3Schools.com finden.
Quicktime
Eine Alternative zu dem Adobe Flash Player bietet uns Apple's Quicktime. Genau wie bei der Flasheinbindung kann das Video über einen < object> oder < embed> tag angezeigt werden. Der eigentliche Unterschied besteht in den Formaten und deren Browserkompatibilität.
Beispiel:
Code:
< object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" widht="830"height="480" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
< param name="SRC" VALUE="src/sc15.mov">
< param name="autoplay" VALUE="false">
< param name="CONTROLLER" VALUE="false">
< embed src="src/sc15.mov" widht="830" height="480" autoplay="false" CONTROLLER="false" pluginspage="http://www.apple.com/quicktime/download/">
< /embed>
< /object>
Erläuterung:
Das Einbinden erfolgt ähnlich wie im oben gezeigten Flash-Beispiel.
Weitere Informationen sind auf developer.apple.com zu finden.
FAQ Frequently Asked Questions
- Was passiert beim Einbetten und was sind Vor- und Nachteile?
- Ein oder mehrere Videobeispiele werden nicht angezeit, was kann ich tun?
- HTML5 oder Flash? Was ist "besser"?
Die Einbettung ermöglicht es Multimediainhalte, von dem eigenen oder einem externen Server, in unserem Markup zu platzieren. Falls sich die Quelldatei auf z.B. einem Videoportal befindet, verringert sich die Auslastung der Homepage. Die Kehrseite ist, dass das Video möglichst dauerhaft erreichbar ist. Zusammengefasst ist das Einbetten von Inhalten für den Benutzer ein relativ einfaches Werkzeug um Dienste wie Kartenapplikationen oder Video-Player zu implementieren.
Überprüfe ob der Browser die vorgestellten Methoden interpretieren kann.
Für die Einbindung mit Flash oder QuickTime werden die entsprechenden Browser Plug-Ins benötigt. Schalte Browser-Addons wie Adblock aus, um sicher zu stellen, dass alle Elemente angezeigt werden können.
Viele namenhafte Firmen benutzen das "neue" HTML5 und die Internetcommunity befindet sich in einer Art Übergang, da es ein breites Spektrum an Möglichkeiten bietet. Mit dem Markup lassen sich unter anderem Applegeräte ansteuern, was mit Flash unmöglich war. Auf der anderen Seite fehlen viele Web-Funktionen und Standarts. Ein weiterer Stein auf dem Weg für HTML5 ist, dass Adobe Flash seit vielen Jahren existiert und viele Flashdateien vorhanden sind. Was besser ist sollte der Entwickler selbst entscheiden.