5.3 Tag
Transcription
5.3 Tag
Video Uwe Hebbelmann Universität Osnabrück Diese Ausarbeitung handelt von dem Thema Video im Internet. Im Folgenden soll gezeigt werden, wie Videos im Internet verfügbar gemacht werden können. Zu Beginn werden die Begriffe 'Videoformat' sowie 'Containerformat' näher erläutert, danach verschiedene Übertragungsverfahren, verschiedene Möglichkeiten der Einbindung in HTML-Webseiten, sowie die gängigsten Videocontainerformate vorgestellt und deren Einbindung anhand von Beispielen dargestellt. Zum Schluß wird kurz auf das Videoportal 'YouTube' eingegangen. Inhaltsverzeichnis 1 Einleitung................................................................................................................................................... 2 2 Videoformate.............................................................................................................................................. 3 3 Containerformate....................................................................................................................................... 4 4 Übertragungsverfahren............................................................................................................................ 5 5 Einbindung................................................................................................................................................. 5.1 Link.................................................................................................................................................... 5.2 <embed> Tag..................................................................................................................................... 5.3 <object> Tag....................................................................................................................................... 5.3.1 mit MIME-Type.......................................................................................................................... 5.3.2 mit ActiveX................................................................................................................................ 5.3.3 Kombination aus embed und object Tag................................................................................... 6 6 6 7 8 9 10 6 Formate...................................................................................................................................................... 6.1 WMV.................................................................................................................................................. 6.2 Quicktime........................................................................................................................................... 6.3 FlashVideo......................................................................................................................................... 6.4 DivX Media Format............................................................................................................................ 6.5 RealVideo.......................................................................................................................................... 6.6 MPEG4.............................................................................................................................................. 12 12 15 17 19 21 24 7 Streaming................................................................................................................................................... 27 8 YouTube...................................................................................................................................................... 8.1 Anzeige.............................................................................................................................................. 8.2 Anmeldung......................................................................................................................................... 8.3 Video hochladen................................................................................................................................ 30 31 32 35 9 Literatur...................................................................................................................................................... 44 1 Einleitung 2 1 Einleitung Was ist Video? Bei einem Video spricht man von bewegten Bildern (Videodaten) sowie ggf. von Begleittönen (Audiodaten). Des Weiteren können optional Metadaten (z.B. Name und Ersteller der Videodatei), Index- und Skriptbefehle (z.B. URLs und Untertitel) oder Menüstrukturen enthalten sein. Um diese Daten digital zu speichern benötigt man Videoformate. 2 Videoformate 3 2 Videoformate Als Videoformate bezeichnet man Aufzeichnungsverfahren für Videos. In diesem Fall wird die digitale Aufzeichnung betrachtet, bei der die vorliegenden Videodaten digitalisiert in Dateiform gespeichert werden. In der Regel liegt ein analoges Videosignal als Basis vor, dass von analog nach digital umgewandelt und meist komprimiert gespeichert wird. Hierzu werden unterschiedliche Dateiformate verwendet. Die Verfahren für die digitale Kodierung von bewegten Bildern und/oder Tönen werden Codecs genannt. Diese liefern rohe Nutzdaten, die in unterschiedlichen Containerformaten gespeichert werden können. 3 Containerformate 4 3 Containerformate Bei einem Containerformat handelt es sich um ein Dateiformat, das verschiedene Datenformate enthalten kann. Typischerweise definiert ein Containerformat nur die Art und Struktur, wie der Inhalt aufzubewahren ist. Generell können Audio-/Video-Containerformate mindestens einen Audio- und Videostream enthalten, darüber hinaus optional Metadaten, Index- und Skriptbefehle, Menüstrukturen und andere Inhalte. Beispiel: 1 Der hier gezeigte AVI-Container kann beispielsweise eine mit dem Xvid-Codec erstellte MPEG-4-Videospur und eine mit LAME erstellte MP3-Audiospur enthalten. Die Audio- und Videospuren in einem Containerformat werden durch einen Multiplexer zusammengeführt. Ein Demultiplexer bzw. Splitter sorgt entsprechend beim Abspielen wieder für die Trennung, um dann vom jeweiligen Codec dekodiert werden zu können. 1 Siehe http://de.wikipedia.org/wiki/Bild:Informatik-Containerformate-Beispiele.svg 4 Übertragungsverfahren 5 4 Übertragungsverfahren Um die Videodaten vom Server auf den Clienten zu übertragen gibt es folgende Möglichkeiten: • den Dateidownload • den progressiven Download • und das Streaming Dateidownload: Die einfachste Methode stellt der Dateidownload dar. Das Video wird erst komplett geladen bevor es abgespielt werden kann. Ein Nachteil hierbei ist die ggf. längere Wartezeit. Progressiver Download: Im Gegensatz zum Dateidownload kann das Video beim progressivem Download bereits gestartet werden, nachdem ein Teil schon geladen wurde. Sowohl der Dateidownload, als auch der progressive Download sind einfach einzusetzen, da keine spezielle Serversoftware benötigt wird. Allerdings kann in beiden Fällen das Video vom User gespeichert werden. Weitere Nachteile des progressiven Downloads sind, dass keine Navigation im noch nicht geladenen Clipbreich möglich ist, und dass es zu Rucklern beim Abspielen kommen kann, wenn zum Beispiel die Übertragungsrate gering ist. Daher ist es nur für kurze Clips geeignet. Streaming: Beim Streaming wird das Video direkt beim Download abgespielt; es kommt Buffering zum Einsatz. Einen großen Vorteil bildet die Navigationsmöglichkeit innerhalb des Clips. Zudem kann der User das Video nicht ohne weiteres speichern, da es nur im RAM gesichert wird. Einen Nachteil stellt hier die Notwendigkeit einer Streaming Server Applikation mit eigenem Protokoll dar. Das Streaming ist eher geeignet für lange Clips, z.B. Livebroadcasting. 5 Einbindung 6 5 Einbindung Im Folgenden werden fünf Möglichkeiten vorgestellt ein Video auf einer HTML Seite verfügbar zu machen: Die Verwendung: • eines Links • der <embed> Tag Syntax • der <object> Tag Syntax • mit Angabe eines MIME-Type • mit ActiveX • Kombination aus <embed> und <object> Tag Syntax 5.1 Link Die einfachste Methode eine Videodatei in eine Webseite einzubinden ist ein gewöhnlicher Link. Allerdings ist dies wenig elegant und das Video wird nicht innerhalb der Webseite angezeigt. Die Video-Datei kann gespeichert oder über einen externen Mediaplayer in einem eigenen Fenster geöffnet werden. Syntax: 1 <a href="URL">LINK</a> Unter dem Attribut "href" wird die URL zur Videodatei angegeben. Beispiel einer WMV-Datei: 1 <a href="http://www.bsp.de/beispiel.wmv">WMV Video</a> 5.2 <embed> Tag Das <embed> Tag wurde von Netscape eingeführt um Multimedia-Inhalte in HTML zu referenzieren. Es gehört nicht zum HTML-Standart und wird daher nicht automatisch von allen Web-Browsern unterstützt. Syntax: 1 <embed src="URL" width="BREITE" height="HÖHE"> Mit <embed src=> definiert man eine Plugin-Referenz. Beim Attribut "src" notiert man die gewünschte Videodatei. Mit den Attributen "width" und "height" wird die Größe des eingebundenen Bereichs bestimmt. Beide Attribute erlauben als Wertzuweisung Pixel (absolut) oder Prozentangaben (relativ in Bezug auf die zur Verfügung stehende Fläche). Das <embed> Tag kann mit oder ohne End-Tag notiert werden. 5 Einbindung 7 Ob und wie die Datei letztendlich beim Anwender "angezeigt" wird, hängt von vielen Faktoren ab, zum Beispiel von der Art der Datei, von den Hardware-Voraussetzungen des Anwenders, von den installierten Plugins und von vorhandenen, dem Web-Browser bekannten, Fremdprogrammen. Hat der Anwender ein nötiges Plugin nicht installiert, so fragt der Web-Browser ob er dieses installieren möchte (sofern es ihm bekannt ist) und erlaubt den Download. Wenn der Web-Browser die Datei nicht verarbeiten kann, sollte er eine Fehlermeldung ausgeben und anstelle der Datei ein Symbol für nicht darstellbare Daten anzeigen. Beispiel einer WMV Datei: 1 <embed src="http://www.bsp.de/beispiel.wmv" 2 width= "300" height= "300"> Es gibt einen regelrechten "Wildwuchs" an weiteren Attributen für das <embed> Tag. Der Grund dafür besteht darin, dass es zu einer Zeit eingeführt wurde, in der es keinerlei Bewusstsein für die Notwendigkeit einer Standardisierung von HTML gab, des Weiteren aber auch am wenig durchdachten Konzept des <embed> Tags. Um eingebundene Multimedia-Elemente zu steuern, bleibt meist nur der Weg, dies über proprietäre Attribute zu tun. Hier ein kleiner Auszug weiterer möglicher Attribute: TYPE: Angabe eines MIME Types ALIGN: wie Text angeordnet werden soll NAME: Name des embed-Objektes PLUGINSPAGE: URL eines möglichen Plugins PLUGINURL: URL eines JAR Archives für automatische Installation HIDDEN: Objekt sichtbar true/false HREF: macht embed-Objekt auch zum Link TARGET: Ziel des Links AUTOSTART: Startet automatisch true/false LOOP: Wiedergabeschleife PLAYCOUNT: Anzahl der Abspielungen VOLUME: Lautstärke CONTROLS: Angabe von Steuerelementen CONTROLLER: Anzeige der Steuerelemente true/false MASTERSOUND:gibt an, welcher Gruppe das Video angehört STARTTIME: Startzeit ENDTIME: Stoppzeit Ob und wie die Attribute am Ende unterstützt werden hängt vom jeweiligen Mediaplayer ab. 5.3 <object> Tag Das <object> Tag bettet einen Mediaplayer und seine Steuerelemente direkt in die Seite ein und kann von dort aus gesteuert werden. Das Tag kann in zwei Varianten eingesetzt werden: • mit Angabe eines MIME-Type • mit ActiveX Attribute können wie beim <embed> Tag innerhalb des <object> Tags angegeben werden. Darüberhinaus gibt es noch eine weitere Möglichkeit der Parameterübergabe mit dem <param> Tag. Der Aufbau folgt dabei immer dem Muster NAME="Parameter Name" VALUE="Parameter Inhalt". 5 Einbindung 8 Syntax: 1 <param name="Parameter Name" value="Parameter Inhalt"> Beispiel: Angabe von "src" für eine WMV Videodatei 1 <param name="src" value="http://www.bsp.de/bsp.wmv"> Dadurch ist die Anzahl und Art der möglichen Parameter nahezu unbegrenzt und richtet sich nach dem verwendetem Mediaplayer. 5.3.1 mit MIME-Type Der MIME-Type teilt dem Web-Browser mit, welcher Datentyp vorliegt, der dann versucht den entsprechenden Mediaplayer zu verwenden. MIME steht für Multipurpose Internet Mail Extensions. Aus dem Namen geht bereits hervor, dass die Spezifikation ursprünglich für E-Mails gedacht war und zwar für E-Mails mit Attachments. Solche so genannten Multipart-Mails enthalten die gesamten zu übertragenden Daten in einer Datei. Innerhalb der Datei musste eine Konvention gefunden werden, wie die einzelnen Teile (z.B.Text der E-Mail und angehängte ZIP-Datei) voneinander zu trennen sind. Dabei wurde auch ein Schema entwickelt, das der interpretierenden Software mitteilt, um welchen Datentyp es sich bei dem jeweils nächsten Teil der E-Mail handelt. Das Schema erwies sich nicht nur für E-Mails als nützlich. Fast immer, wenn entfernte Programme (hier Web-Browser und Web-Server) wegen einer bevorstehenden Datenübertragung miteinander kommunizieren, geht es auch um die Art der zu übertragenden Daten. Dabei hat sich im gesamten Internet das Schema der MIME-Typen durchgesetzt. Sowohl jeder Web-Browser als auch jeder Web-Server führt eine Liste mit ihm bekannten MIME-Typen. Bei der Kommunikation muss der Empfänger den MIME-Type akzeptieren, den der Sender senden will. Liste der wichtigsten MIME-Types: Windows Media Video: video/x-ms-wmv oder application/x-mplayer2 Quicktime: video/quicktime Real Media: audio/x-pn-realaudio-plugin MPEG Video: video/mpeg DivX: video/divx Flash Video: application/x-shockwave-flash Syntax: 1 <object type="MIME-Type" 2 data="URL" 3 width="BREITE" heigth="HÖHE"> 4 Alternativer Inhalt 5 </object> Um eine Videodatei einzubinden, ist das Attribut "data" vorgesehen. Damit referenziert man die gewünschte Datei (data = Daten). Mit dem Attribut "type" definiert man den MIME-Type zur Videodatei. 5 Einbindung 9 Mit den Attributen "width" und "height" wird die Größe des eingebundenen Bereichs bestimmt. Beide Attribute erlauben als Wertzuweisung Pixel (absolut) oder Prozentangaben (relativ in Bezug auf die zur Verfügung stehende Fläche). Weiterhin kann man einen alternativen Inhalt angeben, falls der Web-Browser nicht in der Lage sein sollte das Object anzuzeigen. Beispiel einer Quicktime-Datei: 1 <object type="video/quicktime" 2 data="http://www.bsp.de/beispiel.mov" 3 height="300" width="300"> 4 Quicktime Video kann nicht angezeigt werden! 5 </object> Die Angabe des MIME-Types ist zwar HTML-Standard und stellt damit eine einheitliche, browserübergreifende Schreibweise dar, wird aber erst von neueren Web-Browsern unterstützt. Ein gravierender Nachteil bei z.B. Flash Videos ist die Tatsache, dass der Internet Explorer das Video erst dann startet, wenn es komplett vom Server übertragen wurde. Bei der Einbindung mithilfe der Microsoft-Methode mit ActiveX oder dem <embed> Tag wird das Video bereits gestartet, wenn die Datei teilweise heruntergeladen wurde. Wie auch beim <embed> Tag gibt es eine Vielzahl von verschiedenen Attributen. Hier ein kleiner Auszug möglicher Attribute: src: Multimediadatei region: durch layout definierte Fläche des Präsentationsfensters nojava: true oder false, schaltet die Java-Maschine von Netscape aus oder ein consol: Name eines definierten Layouts des Realplayers controls: definiert die Auswahl der Regler des Realplayers backgroundcolor:Hintergrundfarbe des Präsentationsfenster in Hexadezimal oder Farbnamen center: true, false der Clip wird im Präsentationsfenster zentriert nolabels: true, Clipinformationen werden unterdrückt; false, Clipinformationen werden präsentiert nologo: true, kein Reallogo wird vor dem Clip präsentiert; false, das Reallogo wird präsentiert (Voreinstellung) autostart: true, false startet den Clip automatisch mit der Präsentation der HTML-Seite loop: true, false der Clip wird laufend neu gestartet numloop: Zahl der Wiederholungen in ganzen Zahlen shuffle: bei einer Folge von Clips; true, false spielt die Clipfolge nach Zufallsauswahl 5.3.2 mit ActiveX Eine andere Möglichkeit der Einbettung von Mediaplayern funktioniert über die ActiveX Programmierschnittstelle von Microsoft. ActiveX ist kein W3C Standard und wird daher nicht von allen Web-Browsern unterstützt. Der Aufbau ist nahezu identisch mit dem <object> Tag mit Angabe eines MIME-Types. Anstelle des MIME-Types wird hier das Attribut "ClassID" und optional das Attribut "CodeBase" gesetzt. Syntax: 1 <object classid="CLSID:XXXXXX-XXXX-XXXXXX" 2 codebase="URL" 3 width="BREITE" heigth="HÖHE"> 4 <param name="src" value="URL"> 5 Alternativer Inhalt 6 </object> 5 Einbindung 10 Die ClassID referenziert die Implementierung des gewünschten ActiveX-Controls und die CodeBase gibt eine Adresse an, von der das ActiveX-Control geladen werden kann. Der Internet Explorer verlangt u.a. die Übergabe der Quelldatei über das <param> Tag. Beispiel einer DivX Datei: 1 <object classid="CLSID:67DABFBF-D0AB-41fa-9C46-CC0F21721616" 2 codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" 3 width="300" height="300"> 4 <param name="src" value="http://www.bsp.de/beispiel.divx"> 5 DivX Video kann nicht angezeigt werden! 6 </object> Die ClassIDs bzw. CodeBases der wichtigsten Mediaplayer: Windows Media:ClassID: CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95 CodeBase:http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112 Quicktime: ClassID: CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B CodeBase:http://www.apple.com/qtactivex/qtplugin.cab Real Media: ClassID: CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA DivX: ClassID: CLSID:67DABFBF-D0AB-41fa-9C46-CC0F21721616 CodeBase:http://go.divx.com/plugin/DivXBrowserPlugin.cab Flash Video: ClassID: CLSID:d27cdb6e-ae6d-11cf-96b8-444553540000 CodeBase:http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 5.3.3 Kombination aus embed und object Tag Durch die Verwendung der drei vorgestellten Methoden kann es zu Problemen bei der Darstellung der Webseite mit den verschiedenen Web-Browsern kommen. Das <object> Tag bietet, wie bereits gezeigt, die Möglichkeit, zwischen einleitendem und abschließendem Tag weiteren HTML Code einzufügen, der nur dann interpretiert wird, wenn das <object> Tag nicht angezeigt werden kann. Hier kann also auch ein weiteres <object> Tag oder ein <embed> Tag stehen. Eine Ausnahme von dieser Regel stellt u.a. der Internet Explorer dar, der auch <object> Tags in einem <object> Tag darzustellen versucht. Daher wird diese Variante hier nicht vorgestellt. Syntax: 1 <object type="MIME-Type" 2 data="URL" 3 width="BREITE" heigth="HÖHE"> 4 <embed type="MIME-Type" src="URL" 5 width="BREITE" height="HÖHE"> 6 Alternativer Inhalt 7 </object> Beispiel einer Datei: 1 <object type="video/quicktime" 2 data="http://www.bsp.de/bsp.mov" 3 width="300" heigth="300"> 4 <embed type="video/quicktime" src="http://www.bsp.de/bsp.mov" 5 width="300" height="300"> 6 Quicktime Video kann nicht angezeigt werden! 7 </object> 5 Einbindung 11 Diese umständliche doppelte Einbindung mit <object> Tag und einem darin verschachtelten <embed> Tag hat sich als robust erwiesen und wird auch offiziell vom Flash-Hersteller Macromedia empfohlen. Der Nachteil dabei ist jedoch, dass ein HTML-Element verwendet wird, das nicht zum HTML-Standard gehört. Man erzeugt damit also ungültiges HTML. 6 Formate 12 6 Formate Folgende Containerformate sollen hier näher vorgestellt und dazu Beispiele der Einbindung gezeigt werden: • • • • • • Windows Media Video (WMV) Quicktime (MOV) FlashVideo (FLV) DivX Media Format (DivX) RealVideo (RM) MPEG4 (mp4) 6.1 WMV Das Windows Media Video Format (WMV) gehört wie WMA und ASF zu Microsofts Windows Media Format. Es ist ein proprietärer Video-Codec und dient zur Komprimierung von Videos und zur Umwandlung von Diashows in Videosequenzen. Dateien, die WMV-kodierte Video-Streams enthalten, sind meist in Microsofts Container-Format Advanced Streaming Format (ASF) eingebettet. Diese Dateien haben meistens die Dateiendung .asf, im Falle einer Video-Datei können sie aber auch die Endung .wmv tragen. Sie bestehen aus Windows Media Audio- und Video-Codecs, einem Digital Rights Management (DRM)-System und einem Dateicontainer. Dieser speichert u.a. Audio, Video, Metadaten sowie Index- und Skriptbefehle in einer Datei. Ein Digital Rights Management (DRM)-System soll dem Urheber geistigen Eigentums die Regelung der Zugriffsrechte auf Ton- sowie Videomaterial ermöglichen. In der Praxis wird diese Technik häufig als Kopierschutzmaßnahme eingesetzt. Derzeit existieren drei Versionen von WMV, die allesamt vom Aufbau her ähnlich zu MPEG4 sind. Daher nennt man WMV auch die von Microsoft entwickelte proprietäre Variante von MPEG4. Aufbau: Nun soll gezeigt werden, wie ein WMV Video mit den bereits erklärten Möglichkeiten auf einer HTML Webseite verfügbar gemacht werden kann. 6 Formate 13 Zunächst die einfachste Methode über einen Dateilink. Dateilink-Syntax: 1 <a href="Disco Motorbikeman.wmv">Disco Motorbikeman.wmv</a> Das Video kann gespeichert oder über einen externen Player in einem eigenen Fenster abgespielt werden. Je nach Einstellung des Web-Browsers kann es auch in einem eigenen Browser-Fenster abgespielt werden, sofern das nötige PlugIn installiert ist. Die folgenden Quellcode-Ausschnitte sorgen für die im Bild gezeigte Einbettung in die Webseite selbst: Windows Media Player <embed> Tag Syntax: 1 <embed type="application/x-mplayer2" 2 src="Disco Motorbikeman.wmv" 3 autostart="0" 4 width="360" height="288"> 5 <noembed> 6 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 7 (a) das <embed> Tag nicht verstehen oder<br> 8 (b) besitzt kein nötiges Plug-In.<br> 9 </noembed> 10 </embed> Beim Attribut "type" kann ein MIME-Type angegeben werden, in diesem Fall, dem WMV-Format, beispielsweise "application/x-mplayer2". Durch Setzen des Attributes "autostart" mit dem Wert "0" wird das automatische Abspielen der Videodatei ausgeschaltet. Standardmäßig ist dieses eingeschaltet. Natürlich können, wie im Abschnitt "<embed> Tag Syntax" gezeigt, weitere Optionen gesetzt werden. Im Bereich <noembed> wird ein alternativer Text angegeben, der angezeigt wird, falls der Web-Browser die Videodatei nicht anzeigen kann. 6 Formate 14 <object> Tag Syntax mit MIME-Type: 1 <object width="360" height="288" 2 type="video/x-ms-wmv" 3 data="Disco Motorbikeman.wmv"> 4 <param name="src" value="Disco Motorbikeman.wmv"> 5 <param name="autostart" value="0"> 6 <b>Einbinden des Windows Media Players per <object> Tag Syntax mit MIME-Type.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt kein Windows Media Plug-In. 11 </b> 12 </object> Für das WMV-Format gibt es mehrere MIME-Types. Hier wird im Gegensatz zum <embed> Tag Beispiel der Wert "video/x-ms-wmv" gesetzt. Die Attribute "src" und "autostart" werden hier und im Folgenden durch die <param> Tag Syntax gesetzt. Auch hier gibt es die Möglichkeit eine Vielzahl anderer Optionen anzugeben (siehe kleiner Auszug <object> Tag Syntax). Im Falle der <object> Tag Syntax wird der alternative Text, der angezeigt wird wenn die Videodatei nicht abgespielt werden kann, direkt nach Angabe der Parameter angegeben. <object> Tag Syntax mit ActiveX: 1 <object width="360" height="288" 2 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" 3 codebase="http://activex.microsoft.com/activex/controls/ 4 mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"> 5 <param name="src" value="Disco Motorbikeman.wmv"> 6 <param name="autostart" value="0"> 7 <b>Einbinden des Windows Media Players per <object> Tag Syntax mit ActiveX.<br> 8 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 9 (a) das <object> Tag mit ActiveX nicht richtig darstellen oder<br> 10 (b) versteht das <object> Tag nicht oder<br> 11 (c) besitzt das Windows Media Plug-In nicht. 12 </b> 13 </object> Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="360" height="288" 2 type="video/x-ms-wmv" 3 data="Disco Motorbikeman.wmv"> 4 <param name="src" value="Disco Motorbikeman.wmv"> 5 <param name="autostart" value="0"> 6 <embed type="application/x-mplayer2" 7 src="Disco Motorbikeman.wmv" 8 autostart="0" 9 width=360 height=288> 10 </embed> 11 <b>Einbinden des Windows Media Players per Kombination aus 12 <object> Tag und <embed> Tag Syntax.<br> 13 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 14 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 15 und kennt das <embed> Tag nicht oder<br> 16 (b) versteht das <object> und das <embed> Tag nicht oder<br> 17 (c) besitzt kein Windows Media Plug-In. 18 </b> 19 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/WMV.html 6 Formate 15 6.2 Quicktime Quicktime (MOV) ist ein Containerformat der gleichnamigen Abspielsoftware von Apple. Die Speicherung erfolgt in sowohl sequenziell als auch hierarchisch organisierten Dateneinheiten. Es kann daher neben chronologischen Informationen und Spurdaten, auch strukturelle und hierarchische Informationen und Zusammenhänge speichern. Durch einen speziellen Synchronisations-Layer eignet es sich zudem für das Streaming. Kennzeichnende Eigenschaften des Formates sind Flexibilität, Robustheit und Erweiterbarkeit. Des Weiteren eine gute Qualität bei wenig Speicherplatzbedarf, allerdings höheren Anforderungen an die Leistung des Rechners. Es dient als Basis für das ISO-standardisierte MPEG4-Dateiformat. Im Folgenden wird gezeigt, wie ein Quicktime Video mit den bereits erklärten Möglichkeiten auf einer HTML Webseite verfügbar gemacht werden kann. Zunächst die einfachste Methode über einen Dateilink. Dateilink-Syntax: 1 <a href="Grubenunglueck.mov">Grubenunglueck.mov</a> Das Video kann gespeichert oder über einen externen Player in einem eigenen Fenster abgespielt werden. Je nach Einstellung des Web-Browsers kann es auch in einem eigenen Browser-Fenster abgespielt werden, sofern das nötige PlugIn installiert ist. Die folgenden Quellcode-Ausschnitte sorgen für die im Bild gezeigte Einbettung in die Webseite selbst: Quicktime Player 6 Formate 16 <embed> Tag Syntax: 1 <embed type="video/quicktime" 2 src="Grubenunglueck.mov" 3 autoplay="false" 4 width="400" height="310"> 5 <noembed> 6 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 7 (a) das <embed> Tag nicht verstehen oder<br> 8 (b) besitzt kein nötiges Plug-In.<br> 9 </noembed> 10 </embed> Beim Attribut "type" wird analog zum WMV-Format ein MIME-Type angegeben, für Quicktime "video/quicktime". Im Gegensatz zum WMV-Format wird das automatische Abspielen der Videodatei nicht durch das Attribut "autostart" mit "0" bzw. "1" gesteuert, sondern durch "autoplay" und "true" bzw. "false". Auch hier können, wie im Abschnitt "<embed> Tag Syntax" gezeigt, weitere Optionen gesetzt werden. Im Bereich <noembed> wird ein alternativer Text angegeben, der angezeigt wird, falls der Web-Browser die Videodatei nicht anzeigen kann. <object> Tag Syntax mit MIME-Type: 1 <object width="400" height="310" 2 type="video/quicktime" 3 data="Grubenunglueck.mov"> 4 <param name="src" value="Grubenunglueck.mov"> 5 <param name="autoplay" value="false"> 6 <b>Einbinden des Quicktime Players per <object> Tag Syntax mit MIME-Type.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt kein Quicktime Plug-In. 11 </b> 12 </object> <object> Tag Syntax mit ActiveX: 1 <object width="400" height="310" 2 classid="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 3 codebase="http://www.apple.com/qtactivex/qtplugin.cab"> 4 <param name="src" value="Grubenunglueck.mov"> 5 <param name="autoplay" value="false"> 6 <b>Einbinden des Quicktime Players per <object> Tag Syntax mit ActiveX.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit ActiveX nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt kein Quicktime Plug-In. 11 </b> 12 </object> Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="400" height="310" 2 type="video/quicktime" 3 data="Grubenunglueck.mov"> 4 <param name="src" value="Grubenunglueck.mov"> 5 <param name="autoplay" value="false"> 6 <embed type="video/quicktime" 7 src="Grubenunglueck.mov" 8 autoplay="false" 9 width="400" height="310"> 10 </embed> 11 <noembed> 12 <b>Einbinden des Quicktime Players per Kombination aus 13 <object> Tag und <embed> Tag Syntax.<br> 6 Formate 17 14 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 15 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 16 und kennt das <embed> Tag nicht oder<br> 17 (b) versteht das <object> und das <embed> Tag nicht oder<br> 18 (c) besitzt kein Quicktime Plug-In. 19 </b> 20 </noembed> 21 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/Quicktime.html 6.3 FlashVideo Das FlashVideo (FLV) ist ein Containerformat der Firma Adobe. Es wurde für Webstreaming optimiert und bietet eine sehr gute Qualität bei geringem Dateivolumen. Deshalb ist es auch im Internet äußerst beliebt und kommt u.a. bei YouTube zum Einsatz. Es unterstützt folgende Codecs: • Video: • Sorenson-H.263 • On2 VP6 • MPEG-4 AVC • Audio: • MP3 • Nellymoser Asao Codec • High Efficieny AAC (HE-AAC) Im Folgenden wird gezeigt, wie ein FlashVideo mit den bereits erklärten Möglichkeiten auf einer HTML Webseite verfügbar gemacht werden kann. Zunächst die einfachste Methode über einen Dateilink. Dateilink-Syntax 1 <a href="Oma vs Mercedes.flv">Oma vs Mercedes.flv</a> Das Video kann gespeichert oder über einen externen Player in einem eigenen Fenster abgespielt werden. Je nach Einstellung des Web-Browsers kann es auch in einem eigenen Browser-Fenster abgespielt werden, sofern das nötige PlugIn installiert ist. Die folgenden Quellcode-Ausschnitte sorgen für die im Bild gezeigte Einbettung in die Webseite selbst: 6 Formate 18 Flash Player <embed> Tag Syntax: 1 <embed type="application/x-shockwave-flash" 2 src="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false" 3 width="400" height="300"> 4 <noembed> 5 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 6 (a) das <embed> Tag nicht verstehen oder<br> 7 (b) besitzt kein nötiges Plug-In.<br> 8 </noembed> 9 </embed> Beim Attribut "type" kann ein MIME-Type angegeben werden, hier derjenige für das FlashVideo Format "application/x-shockwave-flash". Der Aufbau des Attributes "src" unterscheidet sich stark von den bisherigen: Im Gegensatz zu den anderen vorgestellten Formaten kann zum Abspielen einer Flash-Videodatei ein Player angegeben werden. Das Aussehen und der Funktionsumfang des Players sind in einer "swf"-Datei gespeichert und liegen in diesem Fall auf der selben Ebene in "flvplayer.swf". Es können entweder selbsterstellte Player, Standardplayer oder Player von Fremdseiten verwendet werden. Das eigentliche FlashVideo befindet sich in einer "flv"-Datei. Diese wird mit "?file=" dem jeweiligen Flas Player angefügt. Attribute müssen zum Teil ebenfalls dem "src"-Attribut angefügt werden. So z.B. auch "autostart", das das automatische Abspielen der Videodatei regelt. Werte hierfür sind "true" bzw. "false". Im Bereich <noembed> wird wieder ein alternativer Text angegeben, der angezeigt wird, falls der Web-Browser die Videodatei nicht anzeigen kann. 6 Formate 19 <object> Tag Syntax mit MIME-Type: 1 <object width="400" height="300" 2 type="application/x-shockwave-flash" 3 src="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false"> 4 <param name="movie" value="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false"> 5 <b>Einbinden des Flash Players per <object> Tag Syntax mit MIME-Type.<br> 6 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 7 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 8 (b) versteht das <object> Tag nicht oder<br> 9 (c) besitzt kein Flash Plug-In. 10 </b> 11 </object> Bei der <object> Tag Syntax muss die "src" Angabe zusätzlich über das <param> Tag als "movie" erfolgen. <object> Tag Syntax mit ActiveX: 1 <object width="400" height="300" 2 classid="CLSID:d27cdb6e-ae6d-11cf-96b8-444553540000" 3 codebase="http://fpdownload.macromedia.com/pub/shockwave/ 4 cabs/flash/swflash.cab#version=8,0,0,0"> 5 <param name="movie" value="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false"> 6 <param name="autostart" value="flase"> 7 <b>Einbinden des Flash Players per <object> Tag Syntax mit ActiveX.<br> 8 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 9 (a) das <object> Tag mit ActiveX nicht richtig darstellen oder<br> 10 (b) versteht das <object> Tag nicht oder<br> 11 (c) besitzt das Flash Plug-In nicht. 12 </b> 13 </object> Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="400" height="300" 2 type="application/x-shockwave-flash" 3 src="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false"> 4 <param name="movie" value="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false"> 5 <embed type="application/x-shockwave-flash" 6 src="flvplayer.swf?file=Oma vs Mercedes.flv&autostart=false" 7 width="400" height="300"> 8 </embed> 9 <b>Einbinden des Flash Players per Kombination aus 10 <object> Tag und <embed> Tag Syntax.<br> 11 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 12 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 13 und kennt das <embed> Tag nicht oder<br> 14 (b) versteht das <object> und das <embed> Tag nicht oder<br> 15 (c) besitzt kein Flash Plug-In. 16 </b> 17 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/FLV.html 6.4 DivX Media Format Das DivX Media Format ist ein MPEG4-kompatibler Video-Codec von der DivX Inc. Er ist bekannt dafür, große Videodateien bei guter Qualität vergleichsweise stark komprimieren zu können und deshalb u.a. sehr beliebt für den Filmdownload. Er stellt eine Erweiterung des AVI Formats dar und unterstützt zudem: 6 Formate • • • • • • 20 interaktive Menüs ein oder mehrere Untertitel ein oder mehrere Audiostreams ein oder mehrere Videostreams das Kapitel setzen und Metadaten Nun soll gezeigt werden, wie ein DivX Video mit den bereits erklärten Möglichkeiten auf einer HTML Webseite verfügbar gemacht werden kann. Zunächst die einfachste Methode über einen Dateilink. Dateilink-Syntax: 1 <a href="Tauchen lernen.divx">Tauchen lernen.divx</a> Das Video kann gespeichert oder über einen externen Player in einem eigenen Fenster abgespielt werden. Je nach Einstellung des Web-Browsers kann es auch in einem eigenen Browser-Fenster abgespielt werden, sofern das nötige PlugIn installiert ist. Die folgenden Quellcode-Ausschnitte sorgen für die im Bild gezeigte Einbettung in die Webseite selbst: DivX Player <embed> Tag Syntax: 1 <embed type="video/divx" 2 src="Tauchen lernen.divx" 3 autoplay="0" 4 width="352" height="272"> 5 <noembed> 6 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 7 (a) das <embed> Tag nicht verstehen oder<br> 8 (b) besitzt kein nötiges Plug-In.<br> 9 </noembed> 10 </embed> Beim Attribut "type" wird analog zu den anderen Formaten der MIME-Type für das DivX Format angegeben: "video/divx". 6 Formate Das automatische Abspielen der Videodatei wird durch das Attribut "autoplay" mit den Werten "0" bzw. "1" gesteuert. <object> Tag Syntax mit MIME-Type: 1 <object width="352" height="272" 2 type="video/divx" 3 data="Tauchen lernen.divx"> 4 <param name="src" value="Tauchen lernen.divx"> 5 <param name="autoplay" value="0"> 6 <b>Einbinden des DivX Players per <object> Tag Syntax mit MIME-Type.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt kein DivX Plug-In. 11 </b> 12 </object> <object> Tag Syntax mit ActiveX: 1 <object width="352" height="272" 2 classid="CLSID:67DABFBF-D0AB-41fa-9C46-CC0F21721616" 3 codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab"> 4 <param name="src" value="Tauchen lernen.divx"> 5 <param name="autoplay" value="0"> 6 <b>Einbinden des DivX Players per <object> Tag Syntax mit ActiveX.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit ActiveX nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt das DivX Plug-In nicht. 11 </b> 12 </object> Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="352" height="272" 2 type="video/divx" 3 data="Tauchen lernen.divx"> 4 <param name="src" value="Tauchen lernen.divx"> 5 <param name="autoplay" value="0"> 6 <embed type="video/divx" 7 src="Tauchen lernen.divx" 8 autoplay="0" 9 width="352" height="272"> 10 </embed><br> 11 <b>Einbinden des DivX Players per <object> Tag Syntax mit MIME-Type.<br> 12 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 13 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 14 (b) versteht das <object> Tag nicht oder<br> 15 (c) besitzt kein DivX Plug-In. 16 </b> 17 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/DivX.html 6.5 RealVideo Das Real Media Format ist ein proprietäres Containerformat von der Firma RealMedia mit einem eigenen Kompressions-Codec. Zum Einsatz kommt es vor Allem in Streaming-Anwendungen. Es existieren vier untereinander nicht kompatible Versionen: 21 6 Formate 22 • RV10: • RealVideo 5, die erste Version von RealVideo, das Format ist identisch mit H.263 • RV20: • RealVideo G2 • RealVideo G2+SVT • RV30: • RealVideo 8 • RV40: • RealVideo 9 • RealVideo 9 EHQ • RealVideo 10 Das Real Media Format verwendet ein Sure Stream Verfahren, welches die Datenübertragungsgeschwindigkeit prüft und entsprechend die Datenmenge reduziert bzw. erhöht. Des Weiteren ist es möglich, mehre Übertragungsqualitäten in einer Videodatei abzulegen. In den 1990ern war es das wichtigste Audio-/Videoformat im Internet. Seit 2002 sind Teile des Quellcodes freigegeben, seitdem existiert das Open Source Projekt helixcommunity.org. Nun soll gezeigt werden, wie ein Real Media Video mit den bereits erklärten Möglichkeiten auf einer HTML Webseite verfügbar gemacht werden kann. Zunächst die einfachste Methode über einen Dateilink. Dateilink-Syntax: 1 <a href="Steve Ballmers Motivationskurs.rm">Steve Ballmers Motivationskurs.rm</a> Das Video kann gespeichert oder über einen externen Player in einem eigenen Fenster abgespielt werden. Je nach Einstellung des Web-Browsers kann es auch in einem eigenen Browser-Fenster abgespielt werden, sofern das nötige PlugIn installiert ist. Die folgenden Quellcode-Ausschnitte sorgen für die im Bild gezeigte Einbettung in die Webseite selbst: Real Media Player 6 Formate 23 <embed> Tag Syntax: 1 <embed type="audio/x-pn-realaudio-plugin" 2 src="Steve Ballmers Motivationskurs.rm" 3 controls="ImageWindow,ControlPanel" 4 autostart="false" 5 width="320" height="240"> 6 <noembed> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <embed> Tag nicht verstehen oder<br> 9 (b) besitzt kein nötiges Plug-In.<br> 10 </noembed> 11 </embed> Beim Attribut "type" wird analog zu den anderen Formaten der MIME-Type für das RealMedia Format angegeben: "audio/x-pn-realaudio-plugin". Alle Elemente des Real Players, die angezeigt werden sollen, müssen beim Attribut "controls" aufgelistet werden. Hier wird zum einen "ImageWindow" angegeben, welches dem Anzeigefenster des Videos entspricht sowie zum anderen "ControlPanel", welches die Steuerungsleiste des Players darstellt. Möchte man diese Elemente nicht zusammenhängend darstellen und z.B. die Steuerungsleiste an einer anderen Position auf der HTML Seite anzeigen, so kann man zwei einzelne <embed> Objekte angeben, eines mit "controls=ImageWindow" und eines mit "controls=Controlpanel" und verknüpft diese mit dem zusätzlichen Attribut "console". Durch Angabe des gleichen Wertes werden die Objekte dann miteinander verknüpft. Das automatische Abspielen der Videodatei wird durch das Attribut "autostart" mit den Werten "true" bzw. "false" geregelt. <object> Tag Syntax mit MIME-Type: 1 <object width="320" height="240" 2 type="audio/x-pn-realaudio-plugin" 3 data="Steve Ballmers Motivationskurs.rm" 4 controls="ImageWindow,ControlPanel"> 5 <param name="src" value="Steve Ballmers Motivationskurs.rm"> 6 <param name="controls" value="ImageWindow,ControlPanel"> 7 <param name="autostart" value="false"> 8 <b>Einbinden des Real Players per <object> Tag Syntax mit MIME-Type.<br> 9 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 10 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 11 (b) versteht das <object> Tag nicht oder<br> 12 (c) besitzt kein Real Media Plug-In. 13 </b> 14 </object> Ein "Trennen" z.B. der Elemente Videofenster und Steuerungsleiste erfolgt analog zur vorgestellten Möglichkeit für das <embed> Tag. <object> Tag Syntax mit ActiveX: 1 <object width="320" height="240" 2 classid="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 3 data="Steve Ballmers Motivationskurs.rm" 4 controls="ImageWindow,ControlPanel"> 5 <param name="src" value="Steve Ballmers Motivationskurs.rm"> 6 <param name="controls" value="ImageWindow,ControlPanel"> 7 <param name="autostart" value="false"> 8 <b>Einbinden des Real Players per <object> Tag Syntax mit ActiveX.<br> 9 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 10 (a) das <object> Tag mit ActiveX nicht richtig darstellen oder<br> 11 (b) versteht das <object> Tag nicht oder<br> 12 (c) besitzt kein Real Media Plug-In. 13 </b> 14 </object> 6 Formate 24 Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="320" height="240" 2 type="audio/x-pn-realaudio-plugin" 3 data="Steve Ballmers Motivationskurs.rm" 4 controls="ImageWindow,ControlPanel"> 5 <param name="src" value="Steve Ballmers Motivationskurs.rm"> 6 <param name="controls" value="ImageWindow,ControlPanel"> 7 <param name="autostart" value="false"> 8 <embed type="audio/x-pn-realaudio-plugin" 9 src="Steve Ballmers Motivationskurs.rm" 10 controls="ImageWindow,ControlPanel" 11 autostart="false" 12 width="320" height="240"> 13 </embed> 14 <b>Einbinden des Real Players per Kombination aus 15 <object> Tag und <embed> Tag Syntax.<br> 16 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 17 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 18 und kennt das <embed> Tag nicht oder<br> 19 (b) versteht das <object> und das <embed> Tag nicht oder<br> 20 (c) besitzt kein Real Media Plug-In. 21 </b> 22 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/RM.html 6.6 MPEG4 MPEG4 ist, wie bereits erwähnt, ein ISO-standardisiertes Containerformat und basiert auf Quicktime. Es organisiert die Mediendaten ebenso wie dieses, in hierarchischen und sequenziellen Dateneinheiten. Diese können eine Vielzahl unterschiedlicher Medientypen aufnehmen und mit Strukturinformationen und deren Abhängigkeiten speichern. Es ist nicht üblich, alle verfügbaren Formate in MPEG4 einzubinden; der Container ist auf folgende Formate beschränkt: • Video: • MPEG-4 (Part 2, Part 10 (AVC/H.264)) • MPEG-2 • MPEG-1 • Audio: • AAC • MP3 • MP2 • MP1 • CELP (für Sprache) • TwinVQ • SAOL (MIDI) • Bilder: • JPEG • PNG • Grafik und Text: • BIFS 6 Formate 25 Nun soll gezeigt werden, wie ein MPEG4 Video mit den bereits erklärten Möglichkeiten auf einer HTML Webseite verfügbar gemacht werden kann. Zunächst die einfachste Methode über einen Dateilink. Dateilink-Syntax: 1 <a href="Wenn der Chef nicht da ist.mp4">Wenn der Chef nicht da ist.mp4</a> Das Video kann gespeichert oder über einen externen Player in einem eigenen Fenster abgespielt werden. Je nach Einstellung des Web-Browsers kann es auch in einem eigenen Browser-Fenster abgespielt werden, sofern das nötige PlugIn installiert ist. Die folgenden Quellcode-Ausschnitte sorgen für die im Bild gezeigte Einbettung in die Webseite selbst: <embed> Tag Syntax: 1 <embed type="video/mpeg" 2 src="Wenn der Chef nicht da ist.mp4" 3 autoplay="false" 4 width="360" height="310"> 5 <noembed> 6 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 7 (a) das <embed> Tag nicht verstehen oder<br> 8 (b) besitzt kein nötiges Plug-In.<br> 9 </noembed> 10 </embed> Wie bei den übrigen vorgestellten Formaten kann für "type" der MIME-Type für das MPEG Format angegeben werden: "video/mpeg". Der Web-Browser verwendet denjenigen Media Player, der für den MIME-Type im System hinterlegt wurde. In diesem Fall der Quicktime Player. Das automatische Abspielen der Videodatei wird durch das Attribut "autoplay" mit den Werten "true" bzw. "false" geregelt. 6 Formate 26 <object> Tag Syntax mit MIME-Type: 1 <object width="360" height="310" 2 type="vido/mpeg" 3 data="Wenn der Chef nicht da ist.mp4"> 4 <param name="src" value="Wenn der Chef nicht da ist.mp4"> 5 <param name="autoplay" value="false"> 6 <b>Einbinden des Videos per <object> Tag Syntax mit MIME-Type.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit MIME-Type nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt kein nötiges Plug-In. 11 </b> 12 </object> <object> Tag Syntax mit ActiveX: 1 <object width="360" height="310" 2 classid="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 3 codebase="http://www.apple.com/qtactivex/qtplugin.cab"> 4 <param name="src" value="Wenn der Chef nicht da ist.mp4"> 5 <param name="autoplay" value="false"> 6 <b>Einbinden des Videos per <object> Tag Syntax mit ActiveX.<br> 7 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 8 (a) das <object> Tag mit ActiveX nicht richtig darstellen oder<br> 9 (b) versteht das <object> Tag nicht oder<br> 10 (c) besitzt das nötiges Plug-In nicht. 11 </b> 12 </object> Für das MPEG Format ist bisher keine eigene "ClassID" bzw. "CodeBase" vorgesehen. Da es auf dem Quicktime Format basiert, werden hier die Angaben für den Quicktime Player verwendet. Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="360" height="310" 2 type="vido/mpeg" 3 data="Wenn der Chef nicht da ist.mp4"> 4 <param name="src" value="Wenn der Chef nicht da ist.mp4"> 5 <param name="autoplay" value="false"> 6 <embed type="video/mpeg" 7 src="Wenn der Chef nicht da ist.mp4" 8 autoplay="0" 9 width="360" height="310"> 10 </embed> 11 <noembed> 12 <b>Einbinden des Videos per Kombination aus 13 <object> Tag und <embed> Tag Syntax.<br> 14 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 15 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 16 und kennt das <embed> Tag nicht oder<br> 17 (b) versteht das <object> und das <embed> Tag nicht oder<br> 18 (c) besitzt kein nötiges Plug-In. 19 </b> 20 </noembed> 21 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/MP4.html 7 Streaming 27 7 Streaming Videostreams ermöglichen dem Benutzer ein möglichst "komfortables" Betrachten und Benutzen. Streaming bedeutet soviel wie "strömend" und bezeichnet das Abspielen von Multimediadateien schon während des Downloads, d.h. sie "strömen" konstant zum Benutzer. Im Unterschied zu einem gewöhnlichen Download werden die Daten jedoch nicht lokal auf dem Computer des Benutzers gespeichert. Das Streaming ermöglicht dem Benutzer jederzeit den wahlfreien Zugriff auf beliebige Positionen im Datenstrom, wodurch u.a. "Vor- und Zurückspulen" ermöglicht wird. Streaming ist keine festgelegte Methode, sondern ein Sammelbegriff verschiedener Techniken. Generell wird zwischen zwei Arten des Streamings unterschieden, dem On-Demand Streaming, bei dem eine, auf einem Streaming Server liegende Datei, abgespielt wird, und dem Live Streaming, wobei eine Live Aufnahme direkt in ein Netzwerk gespeist wird. Da die Video- und Audiodaten aufgrund ihrer Größe in der Regel nicht unkomprimiert in das Internet eingespeist werden können, müssen sie zunächst in ein passendes Format umgewandelt und komprimiert werden. Im Falle des On-Demand Streamings werden die Daten nach der Komprimierung auf einem Streaming Server hinterlegt, der sie an die Empfänger weiterleitet. Im Falle des Live Streams müssen die Daten nicht lokal auf dem Server hinterlegt werden, sondern werden direkt vom Encoder an den Empfänger weitergeleitet (ein Server kann als Verteiler zwischengeschaltet werden). Im Folgenden werden Beispiele für die Einbettung des On-Deamnd Streamings für den Windows Media Player, dem Quicktime Player und dem RealMedia Player gezeigt. Beispiele für das On-Demand Streaming: Tagesschau-Sendung aus dem ARD Online Archiv Windows Media Player Einbettung durch Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="384" height="265" 2 type="video/x-ms-wmv" 3 data="http://streaming.tagesschau.de/bb/redirect.lsc?rewrite= 4 http://www.tagesschau.de/multimedia/video/video259650-ms 5 _res-ms256_vChoice-video259650.asx&content=content&media=ms"> 6 <param name="src" value="http://streaming.tagesschau.de/bb/redirect.lsc?rewrite= 7 Streaming 28 7 http://www.tagesschau.de/multimedia/video/video2596508 ms_res-ms256_vChoice-video259650.asx&content=content&media=ms"> 9 <param name="showstatusbar" value="1"/> 10 <param name="autostart" value="0"> 11 <embed type="application/x-mplayer2" 12 src="http://streaming.tagesschau.de/bb/redirect.lsc?rewrite= 13 http://www.tagesschau.de/multimedia/video/video25965014 ms_res-ms256_vChoice-video259650.asx&content=content&media=ms" 15 autostart="0" 16 showstatusbar="1" 17 swliveconnect="true" 18 width="384" height="265"> 19 </embed> 20 <b>Einbinden des Windows Media Players per Kombination aus 21 <object> Tag und <embed> Tag Syntax.<br> 22 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 23 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 24 und kennt das <embed> Tag nicht oder<br> 25 (b) versteht das <object> und das <embed> Tag nicht oder<br> 26 (c) besitzt kein Windows Media Plug-In. 27 </b> 28 </object> Die Angabe der Streaming Quelle erfolgt mit dem bekannten Attribut "data" bzw. "src". Durch Setzen des Attributes "showstatusbar" wird neben der Kontrollleiste und dem Videoanzeigefenster auch eine Statusbar angezeigt, die u.a. die Übertragungsrate anzeigt. Die Angabe des Attributes mit dem Namen "swliveconnect" des <embed>-Tags ist noch bei einigen Browsern erforderlich, damit man LiveConnect potentiell verwenden kann. Heute-Sendung aus dem ZDF Online Archiv Quicktime Player Einbettung durch Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="450" height="350" 2 classid="CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 3 codebase="http://www.apple.com/qtactivex/qtplugin.cab"> 4 <param name="src" value="http://hstreaming.zdf.de/zdf/300/080110_h12.mov"> 5 <param name="showstatusbar" value="1"/> 6 <param name="autoplay" value="false"> 7 <embed type="video/quicktime" 8 src="http://hstreaming.zdf.de/zdf/300/080110_h12.mov" 9 autoplay="false" 10 showstatusbar="1" 11 swliveconnect="true" 12 width="450" height="350"> 13 </embed> 14 <noembed> 7 Streaming 15 <b>Einbinden des Quicktime Players per Kombination aus 16 <object> Tag und <embed> Tag Syntax.<br> 17 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 18 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 19 und kennt das <embed> Tag nicht oder<br> 20 (b) versteht das <object> und das <embed> Tag nicht oder<br> 21 (c) besitzt kein Quicktime Plug-In. 22 </b> 23 </noembed> 24 </object> Tagesschau-Sendung aus dem ARD Online Archiv Real Media Player Einbettung durch Kombination aus <object> Tag und <embed> Tag Syntax: 1 <object width="384" height="279" 2 type="audio/x-pn-realaudio-plugin" 3 data="http://streaming.tagesschau.de/bb/redirect.lsc?rewrite= 4 http://www.tagesschau.de/multimedia/video/video259650-real_ 5 res-real256_vChoice-video259650.smi&content=content&media=rm" 6 controls="ImageWindow,StatusBar,ControlPanel"> 7 <param name="src" value="http://streaming.tagesschau.de/bb/redirect.lsc?rewrite= 8 http://www.tagesschau.de/multimedia/video/video259650-real_ 9 res-real256_vChoice-video259650.smi&content=content&media=rm"> 10 <param name="controls" value="ImageWindow,StatusBar,ControlPanel"> 11 <param name="autostart" value="false"> 12 <embed type="audio/x-pn-realaudio-plugin" 13 src="http://streaming.tagesschau.de/bb/redirect.lsc?rewrite= 14 http://www.tagesschau.de/multimedia/video/video259650-real_ 15 res-real256_vChoice-video259650.smi&content=content&media=rm" 16 controls="ImageWindow,StatusBar,ControlPanel" 17 autostart="false" 18 width="384" height="279"> 19 </embed> 20 <b>Einbinden des Real Players per Kombination aus 21 <object> Tag und <embed> Tag Syntax.<br> 22 Wenn Sie diesen Text sehen, kann Ihr Browser<br> 23 (a) das <object> Tag mit MIME-Type nicht richtig darstellen 24 und kennt das <embed> Tag nicht oder<br> 25 (b) versteht das <object> und das <embed> Tag nicht oder<br> 26 (c) besitzt kein Real Media Plug-In. 27 </b> 28 </object> Eine Implementierung dieser Beispiele finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/Streaming.html 29 8 YouTube 30 8 YouTube Allgemeines: YouTube ist ein, am 15. Februar 2005 gegründetes, Videoportal, auf dem Benutzer kostenlos Video-Clips ansehen und hochladen können. Am 9. Oktober 2006 wurde es von Google für umgerechnet 1,31 Milliarden Euro gekauft. Es besitzt einen 45 prozentigen Marktanteil im Bereich Videoportal, und laut Berechnungen des US-Unternehmens Ellacoya Networks ist es verantwortlich für 10 Prozent des gesamten Internet-Datenverkehrs und 20 Prozent des HTTP-Aufkommens. Im Alexa Ranking liegt es auf Platz 3 hinter yahoo.com und google.com. Die Firma Alexa sammelt Webseitenzugriffe durch Web-Benutzer und stellt diese dar. Technik: YouTube verwendet das Flash-Video-Format und nutzt Streaming-Technik. Benutzer können Videos in verschiedenen Formaten (u.a. AVI, MPEG, WMV oder Quicktime) hochladen. Diese werden dann vor der Weiterverbreitung von YouTube in das Flash-Video-Format konvertiert. Die Clips dürfen im Regelfall eine Größe von 100 MB oder 10 Minuten nicht überschreiten. Nach dem Konvertierungsprozess können Nutzer je nach Einstellung die hochgeladenen Videos auf der YouTube-Webseite ansehen oder auf eigene Webseiten integrieren. Beispiel Im Folgenden soll nun anhand eines einfachen Beispieles gezeigt werden, wie man ein Video auf YouTube einstellen kann. • Anzeige • Anmeldung • Video hochladen 8 YouTube 8.1 Anzeige Bereitgestellte Videos können entweder auf der YouTube Webseite angesehen werden oder auf eigenen Webseiten integriert werden. Den Quellcode zum Einbetten stellt YouTube selbst zur Verfügung. Anzeige auf der YouTube Webseite: Beispielvideo 31 8 YouTube 32 Anzeige auf einer eigenen Webseite: YouTube Flash Player Quellcode: 1 <object width="425" height="355"> 2 <param name="movie" value="http://www.youtube.com/v/hMgXAR7oh-I&rel=1"></param> 3 <param name="wmode" value="transparent"></param> 4 <embed src="http://www.youtube.com/v/hMgXAR7oh-I&rel=1" 5 type="application/x-shockwave-flash" 6 wmode="transparent" 7 width="425" height="355"> 8 </embed> 9 </object> Im Gegensatz zu den bisher vorgestellten Möglichkeiten der Einbindung fehlt beim <object> Tag die Angabe des Attributes "type". Ebenso unterscheidet sich die Angabe von "src" bzw. "movie" von der vorgestellten Möglichkeit beim FlashVideo; auf dem ersten Blick fehlt also die Angabe des Flash Players sowie der Videoquelle. Über die angegebene Adresse werden jedoch Java-Skripte gestartet, die diese Daten liefern. Eine Implementierung dieses Beispieles finden Sie hier: http://www-lehre.informatik.uos.de/~uhebbelm/Video/Youtube.html 8.2 Anmeldung Um Videos auf den YouTube Webseiten bereitzustellen muss man sich dort zunächst anmelden. Nach Aufruf der Internetseite (www.youtube.com) klickt man auf "Neues Konto" und gelangt zu einem Anmeldeformular. 8 YouTube 33 YouTube Startseite Für die Kontoerstellung sind folgende Angaben nötig: • • • • • • • • Kontotyp: Standart, Regisseur, Musiker, Comedian, Guru E-Mail-Adresse YouTube-Nutzername (nur aus Buchstaben von A bis Z oder Zahlen von 0 bis 9) Passwort Land PLZ Geschlecht Geburtsdatum Nach Eingabe eines bereits angegebenen Bestätigungscodes sowie Zustimmung zu den Nutzungsbedingungen und den Datenschutzrichtlinien klickt man auf den Button "Neues Konto". YouTube sendet nun eine E-Mail an die angegebene Adresse, die einen "Confirmationlink" enthält. Nachdem man diesen aufgerufen hat ist die Kontoerstellung abgeschlossen. 8 YouTube Anmeldeformular 34 8 YouTube 35 8.3 Video hochladen Um ein Video hochzuladen muss man sich nach erfolgreicher Kontoerstellung zunächst auf der YouTube Webseite einloggen. Nun wird in der Menüleiste der eigene Benutzername angezeigt und man kann sein eigenes Konto aufrufen um z.B. seine Daten zu ändern. Um ein Video hochzuladen klickt man auf die entsprechende Schaltfläche: YouTube-Startseite nach dem Einloggen Video hochladen (Schritt 1 von 2) Zunächst gibt man allgemeine Informationen zur Beschreibung des Videos an: Titel, Beschreibung, die Videokategorie sowie Tags (Suchbegriffe, mit denen andere Personen das Video finden können). Danach kann man Broadcast-Optionen, Optionen für Datum und Karte, sowie Freigabeoptionen festlegen. 8 YouTube Video hochladen (Schritt 1 von 2) Brodcast-Optionen Wählt man die Option "öffentlich", so ist das Video weltweit ansehbar und kann über die YouTube-Suche gefunden werden. Wählt man hingegen "privat" so können nur Personen das Video ansehen, die den Link zugeschickt bekommen haben. 36 8 YouTube 37 Optionen für Datum und Karte Unter "Optionen für Datum und Karte" kann man angeben zu welchem Zeitpunkt das Video bereitgestellt werden soll und wo das Video aufgenommen wurde. 8 YouTube 38 Freigabeoptionen Nachdem man alle Optionen angepasst hat klickt man entweder auf "Video hochladen..." um ein bereits erstelltes Video hochzuladen oder auf "Quick Capture verwenden" um ein Video mit einer installierten WebCam zu erstellen. Im Folgenden wird gezeigt, wie man ein bereits erstelltes Video hochläd. 8 YouTube 39 Video hochladen (Schritt 2 von 2) Im zweiten Schritt erfolgt nur noch die Pfadangabe zur Videodatei und der Start des Hochladens durch Klicken der entsprechenden Schaltfläche. YouTube akzeptiert u.a. Videodateien in den Formaten WMV, AVI, MOV und MPG4 (DivX, Xvid, SQV3). 8 YouTube Video hochladen - Abgeschlossen Diese Meldung erscheint nach erfolgreichem Hochladen. 40 8 YouTube 41 Meine Videos Das Video wird direkt nach dem Upload-Vorgang unter dem Menüpunkt "Meine Videos" angezeigt. Es muss allerdings zunächst noch in das FlashVideo Format konvertiert werden. Nach Abschluß der Konvertierung wird der Status auf "Live!" geändert und ist somit verfügbar. 8 YouTube 42 8 YouTube Anzeige auf der YouTube Webseite Anzeige des Beispielvideos auf der Youtube-Webseite 43 9 Literatur 9 Literatur • • • • • http://de.selfhtml.org/html/multimedia/objekte.htm http://www.microsoft.com/windows/windowsmedia/de/format/default.aspx http://developer.apple.com http://de.wikipedia.org http://www.youtube.com 44