Video

1. Video Uwe Hebbelmann Web Publishing WS 2007/2008

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

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

4. 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

5. 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

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

7. Ü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

8. Vor- und Nachteile • Dateidownload 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 ■ kann vom User gespeichert werden  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

9. 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

10. Verwendungs eines Links Syntax: <a href="URL">LINK</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 Beispiel einer WMV Datei: <a href="http://www.bsp.de/beispiel.wmv">WMV Video</a> Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

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

12. <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

13. <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

14. <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

15. <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

16. <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

17. <object> Tag Syntax mit ActiveX Syntax: <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

18. <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

19. Kombination aus <embed> Tag und <object> Tag Syntax 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

20. 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

21. 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

22. 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

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

24. Beispiel * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

25. 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

26. Beispiel * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

27. 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

28. Beispiel * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

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

30. Beispiel * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

31. 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 • in den 1990ern wichtigstes Audio-/Videoformat im Netz • seit 2002 sind Teile des Quellcodes freigegeben, seitdem existiert das Open Source Projekt helixcommunity.org • Sure Stream: • Verfahren prüft Datenübertragungsgeschwindigkeit und reduziert die Datenmenge entsprechend • mehrer Übertragungsqualitäten können in einer Videodatei abgelegt werden Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

32. Beispiel * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

33. MPEG4 (MP4) • ISO-standardisiertes Containerformat für MPEG4 Inhalte (basiert auf Quicktime) • organisiert die Mediendaten ebenso wie dieses, in hierarchischen und sequenziellen Dateneinheiten. Sie 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

34. Beispiel * Beispielseite * Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

35. YouTube 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

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

37. 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

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