Uwe Hebbelmann Web Publishing WS 2007/2008

Präsentation zum Thema: "Uwe Hebbelmann Web Publishing WS 2007/2008"—  Präsentation transkript:

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

2 Inhalt Übertragungsverfahren Was ist Video?
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 Beispiele z.B. AVI-Datei 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 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

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> Beispiel einer WMV Datei: <a href=" 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

11 <embed> Tag Syntax
<embed src="URL" width="BREITE" height="HÖHE"> Beispiel einer WMV Datei: <embed src=" 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

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=" 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=" 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
<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-CC0F " codebase=" width="300" height="300"> <param name="src" value=" 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 en/nsmp2inf.cab#Version=6,4,7,1112 Quicktime ClassID CLSID:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B CodeBase Real Media ClassID CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA DivX ClassID CLSID:67DABFBF-D0AB-41fa-9C46-CC0F CodeBase Flash Video ClassID CLSID:d27cdb6e-ae6d-11cf-96b CodeBase 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
<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=" width="300" heigth="300"> <embed type="video/quicktime" src=" 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 Windows Media Video (WMV)
* 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 Quicktime (MOV) * 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 FlashVideo (FLV) * 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 Metadaten Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

30 DivX Media Format (DivX)
* 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 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

32 RealVideo (RM) * 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 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

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

35 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

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

37 Literatur http://de.selfhtml.org/html/multimedia/objekte.htm
Video • Uwe Hebbelmann • Web Publishing WS 2007/2008

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