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