Uwe Hebbelmann Web Publishing WS 2007/2008 Video Uwe Hebbelmann Web Publishing WS 2007/2008

Inhalt Übertragungsverfahren Was ist Video? Wie binde ich das Video ein? Vorstellung verschiedener Formate YouTube Literatur Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Was ist Video? Bewegte Bilder / Videodaten Optional: Audiodaten Metadaten Index- und Skriptbefehle Menüstrukturen ... Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Videoformate bezeichnet Aufzeichnungsverfahren für Videos in der Regel analoges Videosignal als Basis dieses wird von analog nach digital umgewandelt und meist komprimiert gespeichert hierzu werden unterschiedliche Dateiformate verwendet 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 Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Containerformate Dateiformat, das verschiedene Datenformate enthalten kann typischerweise definiert ein Containerformat nur die Art und Struktur, wie der Inhalt aufzubewahren ist Audio-/Video-Containerformate können zumindest einen Audio- und Videostream enthalten. Darüber hinaus optional Metadaten, Index- und Skriptbefehle, Menüstrukturen und andere Inhalte Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Beispiele z.B. AVI-Datei z.B. Datei mit Matroska-Container Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Übertragungsverfahren Möglichkeiten: Dateidownload: Video wird erst komplett geladen und kann dann abgespielt werden Progressiver Download: Video wird bereits gestartet, wenn die Datei teilweise heruntergeladen wurde bzw. wird Streaming: Video wird direkt beim Download abgespielt (Einsatz von Buffering) Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Vor- und Nachteile Dateidownload Progressiver Download Streaming Vorteil: ■ einfach einzusetzen (keine Serversoftware nötig) Nachteil: ■ Wartezeit ■ kann vom User gespeichert werden Progressiver Download Vorteil: ■ keine spezielle Serversoftware nötig (läuft über http) Nachteil: ■ keine Navigation im noch nicht geladenen Clipbereich möglich ■ „Ruckler“ beim Abspielen wenn Übertragung sich verzögert  nur für kurze Clips geeignet Streaming Vorteile: ■ Navigation innerhalb des Clips möglich ■ kein Speichern des Users auf Festplatte (sichert nur im RAM) Nachteile: ■ benötigt Streaming Server Applikation mit eigenem Protokoll  geeignet für lange Clips, z.B. Livebroadcasting Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Wie binde ich das Video ein? Verwendung eines Links der <embed> Tag Syntax der <object> Tag Syntax mit MIME-Type der <object> Tag Syntax mit ActiveX einer Kombination aus <embed> Tag und <object> Tag Syntax Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Verwendungs eines Links Syntax: <a href="URL">LINK</a> Beispiel einer WMV Datei: <a href="http://www.bsp.de/beispiel.wmv">WMV Video</a> einfachste Methode, dafür aber nicht sehr elegant Video-Datei kann gespeichert werden oder über einen externen Player in einem eigenen Fenster geöffnet werden Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<embed> Tag Syntax <embed src="URL" width="BREITE" height="HÖHE"> Beispiel einer WMV Datei: <embed src="http://www.bsp.de/beispiel.wmv" width= "300" height= "300"> gehört nicht zum HTML Standart, wurde von Netscape eingeführt daher wird es nicht automatisch von allen Browsern unterstützt Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<embed> Tag Syntax Zusätzliche Optionen: 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 (Es werden nicht alle Funktionen von allen Playern unterstüzt!) Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<object> Tag Syntax mit MIME-Type MIME-Type: teilt dem Browser mit welcher Datentyp vorliegt Syntax: <object type="MIME-Type" data="URL" width="BREITE" heigth="HÖHE"> Alternativer Inhalt </object> Beispiel einer Quicktime Datei: <object type="video/quicktime" data="http://www.bsp.de/beispiel.mov" height="300" width="300"> Quicktime Video kann nicht angezeigt werden! </object> Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<object> Tag Syntax mit MIME-Type gehört zum HTML-4-Standard einheitliche, browserübergreifende Schreibweise aber: benutzt zwar validen Code und folgt dem HTML-4-Standard, funktioniert allerdings erst in neueren Browsern gravierender Nachteil bei z.B. Flash Videos: Internet Explorer startet das Video erst, wenn es komplett vom Server übertragen wurde. Bei der Einbindung mithilfe der ActiveX Angabe oder <embed> Tag wird das Video bereits gestartet, wenn die Datei teilweise heruntergeladen wurde 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 Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<object> Tag Syntax Parameter können wie beim <embed> Tag innerhalb des <object> Tag angegeben werden. Zusätzlich geben <param> Tags Möglichkeiten zur Parameterübergabe: Syntax: <param name="Parameter Name" value="Parameter Inhalt"> Beispiel: <param name="src" value="http://www.bsp.de/bsp.wmv"> Die Anzahl und Art der möglichen Parameter richtet sich nach dem verwendetem Player Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<object> Tag Syntax Zusätzliche Optionen u.a. : DATA: URI (object data) ARCHIVE: CDATA (archive files) NAME: CDATA (name for form submission) USEMAP: URI (client-side image map) TYPE: ContentType (content-type of object) CODETYPE: ContentType (content-type of code) STANDBY: Text (message to show while loading) TABINDEX: Number (position in tabbing order) ALIGN: [ top | middle | bottom | left | right ] (object alignment) BORDER: Pixels (link border width) HSPACE: Pixels (horizontal gutter) VSPACE: Pixels (vertical gutter) ... Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<object> Tag Syntax mit ActiveX <object classid="CLSID:XXXXXX-XXXX-XXXXXX" codebase="URL" width="BREITE" heigth="HÖHE"> <param name="src" value="URL"> Alternativer Inhalt </object> Beispiel einer DivX Datei: <object classid="CLSID:67DABFBF-D0AB-41fa-9C46-CC0F21721616" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" width="300" height="300"> <param name="src" value="http://www.bsp.de/beispiel.divx"> DivX Video kann nicht angezeigt werden! </object> ClassID: referenziert die Implementierung des gewünschten ActiveX-Controls CodeBase: gibt Adresse an, von der das ActiveX-Control geladen werden kann Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

<object> Tag Syntax mit ActiveX Microsoft-Methode wird daher nicht von allen Browsern unterstützt Die ClassID/CodeBase der wichtigsten Player: 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 Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Kombination aus <embed> Tag und <object> Tag Syntax <object type="MIME-Type" data="URL" width="BREITE" heigth="HÖHE"> <embed type="MIME-Type" src="URL" width="BREITE" height="HÖHE"> Alternativer Inhalt </object> Beispiel einer Quicktime Datei: <object type="video/quicktime" data="http://www.bsp.de/bsp.mov" width="300" heigth="300"> <embed type="video/quicktime" src="http://www.bsp.de/bsp.mov" width="300" height="300"> Quicktime Video kann nicht angezeigt werden! </object> Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Kombination aus <embed> Tag und <object> Tag Syntax hat sich als sehr „robust“ erwiesen wird u.a. offiziell vom Flash-Hersteller Macromedia empfohlen Nachteil: Verwendung eines HTML-Elements, das nicht zum Standart gehört Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Containerformate Windows Media Video (WMV) Quicktime (MOV) FlashVideo (FLV) DivX Media Format (DivX) RealVideo (RM) MPEG4 (mp4) Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Windows Media Video (WMV) proprietärer Video-Codec von Microsoft der Codec dient zur Komprimierung von Videos und zur Umwandlung von Diashows in Videosequenzen unterstützt die Einbindung von Digital Rights Management (DRM) besteht aus Windows Media Audio- und Video-Codecs, einem DRM-System und einem Dateicontainer dieser speichert folgende Elemente in einer Datei: Audio, Video, Metadaten sowie Index- und Skriptbefehle es existieren drei Versionen von WMV, die allesamt vom Aufbau her ähnlich zu MPEG4 sind ("von Microsoft entwickelte proprietäre Variante von MPEG4") Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Windows Media Video (WMV) Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Windows Media Video (WMV) * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Quicktime (MOV) Containerformat der gleichnamigen Abspielsoftware von Apple 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 desweiteren gute Qualität bei wenig Platzbedarf, allerdings höherer Anforderungen an die Leistung des Rechners dient als Basis für das ISO-standardisierte MPEG4-Dateiformat Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Quicktime (MOV) * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

FlashVideo (FLV) Containerformat von Adobe für Webstreaming optimiertes Format sehr gute Qualität bei geringem Dateivolumen unterstützt folgende Codecs: Video: Sorenson-H.263 On2 VP6 MPEG-4 AVC Audio: MP3 Nellymoser Asao Codec High Efficieny AAC (HE-AAC) Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

FlashVideo (FLV) * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

DivX Media Format (DivX) MPEG4-kompatibler Video-Codec von DivX Inc. bekannt dafür große Videodateien bei guter Qualität vergleichsweise stark komprimieren zu können deshalb u.a. sehr beliebt für Filmdownload Erweiterung des AVI Formats, unterstüzt: interaktive Menüs ein oder mehrere Untertitel ein oder mehrere Audiostreams ein oder mehrere Videostreams Kapitel stezen Metadaten Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

DivX Media Format (DivX) * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

RealVideo (RM) proprietäres Containerformat von RealMedia mit eigenem Kompressions-Codec wird vor allem in Streaming-Anwendungen benutzt es existieren vier untereinander nicht kompatible Versionen: 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 Sure Stream: Verfahren prüft Datenübertragungsgeschwindigkeit und reduziert die Datenmenge entsprechend mehrer Übertragungsqualitäten können in einer Videodatei abgelegt werden in den 1990ern wichtigstes Audio-/Videoformat im Netz seit 2002 sind Teile des Quellcodes freigegeben, seitdem existiert das Open Source Projekt helixcommunity.org Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

RealVideo (RM) * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

MPEG4 (MP4) ISO-standardisiertes Containerformat für MPEG4 Inhalte (basiert auf Quicktime) 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 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 und MPEG-1 Audio: AAC, MP3, MP2, MP1, CELP (für Sprache), TwinVQ, SAOL (MIDI) Bilder: JPEG, PNG Grafik und Text: BIFS Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

MPEG4 (MP4) * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

YouTube Video • Uwe Hebbelmann • Web Publishing WS 2007/2008 Allgemeines: am 15. Februar 2005 gegründetes Videoportal, auf dem Benutzer kostenlos Video-Clips ansehen und hochladen können. wurde am 9. Oktober 2006 von Google für umgerechnet 1,31 Milliarden Euro gekauft. 45 Prozent Marktanteil im Bereich Videoportal verantwortlich für 10 Prozent des gesamten Internet-Datenverkehrs und 20 Prozent des HTTP-Aufkommens. (Nach Berechnungen des US-Unternehmens Ellacoya Networks) Alexa Ranking 3 (hinter yahoo.com und google.com) Technik: verwendet das Flash-Video-Format nutzt Streaming-Technik Videos können in verschiedenen Formaten (u.a. AVI, MPEG, WMV oder Quicktime) hochgeladen werden werden vor der Weiterverbreitung von YouTube in das Flash-Video-Format konvertiert Clips dürfen im Regelfall eine Größe von 100 MB oder 10 Minuten nicht überschreiten Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

* http://www.youtube.com * YouTube * http://www.youtube.com * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

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 Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

Vielen Dank für Ihre Aufmerksamkeit! Ende Vielen Dank für Ihre Aufmerksamkeit! Video • Uwe Hebbelmann • Web Publishing WS 2007/2008