3 Entwicklung von HTML5

Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Hochschule:
Standort:
Studiengang:
Veranstaltung:
Betreuer:
Typ:
Themengebiet:
Autor(en):
Studienzeitmodell:
Semesterbezeichnung:
Studiensemester:
Bearbeitungsstatus:
Prüfungstermin:
Abgabetermin:
Fallstudienarbeit
Hochschule für Oekonomie & Management
Hamburg
Bachelor Wirtschaftsinformatik
Fallstudie / Wissenschaftliches Arbeiten
Prof._Dr._Uwe_Kern
Fallstudienarbeit
HTML 5
Andreas Auls, Jörg Loges, Ole Brüns
Abendstudium
WS10
2
begutachtet
31.01.2011
16.01.2011
FOM Hamburg Abendstudium
Autoren: Andreas Auls, Ole Brüns, Jörg Loges
Präsentation
Inhaltsverzeichnis
• 1 Einleitung
• 2 Grundlagen HTML
♦ 2.1 HTML als Grundlage für die Nutzung des Internets
♦ 2.2 Der Aufbau einer Webseite
♦ 2.3 Darstellung von Webseiten durch Browser
• 3 Entwicklung von HTML5
♦ 3.1 Neuerungen in HTML5 gegenüber HTML4
♦ 3.2 Verändertes Nutzerverhalten
♦ 3.3 Bedeutung von HTML5 für das Web 2.0
• 4 Videoanwendungen in HTML5
♦ 4.1 Integration von Videos in HTML5 Webseiten
◊ 4.1.1 Beispiel für Webseiten (HTML
Quelltext)
⋅ 4.1.1.1 Darstellung Mozilla Firefox
3.6
⋅ 4.1.1.2 Darstellung mit Microsoft IE 9
(Beta)
⋅ 4.1.1.3 Darstellung Google Crome 8
⋅ 4.1.1.4 Darstellung Internet Explorer 8
(Flash video)
◊ 4.1.2 Attribute für Video-Elemente
◊ 4.1.3 Track-Kindelement
♦ 4.2 JavaScript & Events
♦ 4.3 Unterstützung von Codecs durch Browser
♦ 4.4 Bedienelemente zum Abspielen
♦ 4.5 Möglichkeit einer Alternativdarstellung bei
Nichtunterstützung
Inhaltsverzeichnis
1
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
• 5 Darstellung von Videoanwendungen in
HTML5-Player-Frameworks
♦ 5.1 HTML5 Unterstützung durch Webbrowser
♦ 5.2 Möglichkeit des Hostens von Videos durch
Webseitenbetreiber
◊ 5.2.1 Vorteile
◊ 5.2.2 Nachteile
• 6 Entwicklung und Zukunft von HTML5 im Bezug auf Video
• 7 Fazit/Raum für weitere Untersuchungen
• 8 Anhang
♦ 8.1 Quellenverzeichnis
◊ 8.1.1 Fußnoten
◊ 8.1.2 Literaturnachweis
◊ 8.1.3 Abkürzungsverzeichnis
♦ 8.2 Abbildungsverzeichnis
1 Einleitung
Im Rahmen des Unterrichtsfaches "Fallstudien/Wissenschaftliches Arbeiten" wurde die folgende Arbeit zu dem
Thema "Analyse der Funktionen und Demonstrationen von HTML5 im Hinblick auf Video" erstellt. Das Ziel
dieser Arbeit ist es, einen allgemeinen Überblick über die Entwicklung der HTML Sprache, mit dem Schwerpunkt
auf Video-Anwendungen zu schaffen.
2 Grundlagen HTML
HTML ist die Abkürzung für Hyper Text Markup Language und ist eine Auszeichnungssprache zur Erstellung
von Textdokumenten in Webseiten und Webapplikationen. Mit Hilfe dieser Sprache werden Strukturen und
Inhalte von Textdokumenten standardisiert. Basierend auf der Standard Generalized Markup Language
entwickelte Tim Berners-Lee[1] im Jahre 1989 die erste Version dieser Sprache. Seit der ersten offiziellen HTML
Version 2.0 von 1995 wurde dieses Sprachkonzept ständig den Bedürfnissen der Nutzer des World Wide Web
und technischen Möglichkeiten der Softwarehersteller angepasst. Aufgrund der großen Anzahl von
Software-Lösungen für Anwendungen innerhalb des Internets ist die Einhaltung von Standards für dessen
Nutzung notwendig. Entwickelt werden diese Standards von dem World Wide Web Consortium (W3C). Die
HTML Version 4.01 aus dem Jahre 1999 ist die letzte Spezifikation des W3C[2] und wird von den meisten
Softwareherstellern unterstützt.
2.1 HTML als Grundlage für die Nutzung des Internets
HTML strukturiert Texte, erzeugt Tabellen und integriert Referenzen innerhalb des Textes auf multimediale
Inhalte.
"Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, Verweise (Hyperlinks) zu definieren.
Verweise (Links, Hyperlinks) können zu anderen Stellen der eigenen Website führen, aber auch zu beliebigen
anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des Web sind. HTML ist
ein sogenanntes Klartextformat. HTML-Dokumente können Sie mit einem beliebigen Texteditor bearbeiten, der
1 Einleitung
2
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Daten als reine Textdateien abspeichern kann. HTML ist also nicht an irgendein bestimmtes, kommerzielles
Softwareprodukt gebunden. [...] Die Verwendung von HTML ist nicht an Lizenzen gebunden."[3]
Durch Hyperlinks werden Verweise auf beliebige Dokumente oder Daten anderer Anbieter ermöglicht und
inhaltlich passend zur Verfügung gestellt. Dem Nutzer wird so die bedienerfreundliche Navigation zu
unterschiedlichen Informationsangeboten ermöglicht. Dieser nutzerfreundliche Informations- und Datenaustausch
ist für die Akzeptanz des World Wide Web und die Weiterentwicklung von entsprechender Anwendungssoftware
mitverantwortlich. Webseiten in HTML sind einfach und mit geringem Aufwand zu erzeugen. Die einfach
gehaltenen Elemente und Attribute der HTML Sprache werden von den meisten Browsern unterstützt und die
HTML Webseiten dargestellt.
2.2 Der Aufbau einer Webseite
HTML ist eine Dokument Auszeichnungssprache. Für die Entwicklung einer Webseite wird keine spezielle
Software benötigt, da Webseiten als Textdokumente erstellt und danach konvertiert werden. Zur Anwendung
kommen dabei Code-Editoren.
"Internet-typische Technologien sind bewusst Software-unabhängig ausgelegt. Das hat gute Gründe. Im Internet
treffen alle nur erdenklichen Betriebssysteme und Rechnertypen aufeinander, und Technologien, die für alle
verfügbar sein sollen, haben keine große Chancen, wenn sie systemspezifisch sind oder spezielle Anforderungen
stellen, die Teile der Internet-Nutzer ausschließen."[4]
Der Inhalt eines HTML-Dokumentes steht in HTML-Elementen, welche durch Tags markiert werden.
HTML-Elemente haben fast immer ein einleitendes und ein abschließendes Tag. Der Bereich zwischen den Tags
ist der Gültigkeitsbereich des HTML-Elementes.
Beispiel HTML-Element für den Kopfbereich: <head> Inhalt des HTML-Elementes Head </head>
Grundgerüst einer Webseite:
2.1 HTML als Grundlage für die Nutzung des Internets
3
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 1
Bestandteile eines HTML-Dokumentes:
• Dokumenttyp
• Kopfbereich
• Dokumentkörper
Dokumenttyp:
Im HTML Dokument wird der Dokumenttyp durch den Tag <!doctype html> deklariert. "In der Praxis sind die
HTML-Dokumenttypen wichtig, weil sie bestimmen, wie ein Browser ein HTML-Dokument darstellt. [...] Der
Dokumenttyp wird als erste Angabe in einem HTML-Dokument notiert, vor dem startenden <html>-Tag."[5]
Beispiel HTML5 Dokumenttyp: <!doctype html>
Kopfbereich:
Das HTML-Element Kopfbereich, in der HTML-Sprache Head genannt, ist für den Titel der Webseite,
Javascripte, Meta-Angaben, logische Verknüpfungen und Stylesheet-Definitionen vorgesehen.
• Titel der HTML-Seite: Der Titel wird von Web-Browsern bei der Suche ausgewertet.
• Javascripte: Einbindung von Programmen z.B. zur Plausibilitätsprüfung von Formulareingaben.
• Meta-Angaben: Sie enthalten Angaben zum Autor, zum Inhalt der Webseite oder HTTP-Kom3.1
Kommandos.
• logische Verknüpfungen: Verlinkung zu übergeordneten Seiten oder Nachbarseiten.
• Stylesheet-Definitionen: Definition von Formateigenschaften einzelner HTML-Elemente.
• Default-Zielfenster für Hyperlinks
Dokumentkörper:
Dieses HTML-Element wird Body genannt und beinhaltet den sichtbaren Teil einer Webseite, wie Text mit
Überschriften, Verweise und Medienelemente.
Die Elemente Body und Head werden in die Tags <html> bzw. </html> eingeschlossen. Das HTML-Element
wird als Wurzelelement eines HTML-Dokuments bezeichnet.
2.3 Darstellung von Webseiten durch Browser
Der Browser ist ein Anwendungsprogramm, mit der Aufgabe
• Web-Dokumente von einem Server anzufordern
• die verschiedenen Sprachen und Datenformate zu interpretieren und anzuzeigen
• Suchfunktion
"Web-Browser sind Visualisierungsprogramme für Web-Seiten. Web-Browser beherrschen das HTTP-Protokoll
und können mit Web-Servern kommunizieren, um etwa die Daten einer Web-Adresse anzufordern. Alle
2.2 Der Aufbau einer Webseite
4
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Web-Browser beherrschen mehr oder weniger gut HTML, die meisten mittlerweile auch die ergänzenden
Technologien CSS und JavaScript, allerdings uneinheitlich vollständig."[6]
3 Entwicklung von HTML5
HTML5 ist seit 2007 in der Entwicklung und ist der neue HTML-Standard. In dieser Version wird die Sprache
formal nicht mehr als SGML-Dokumenttyp definiert, sondern als Dokument-Objekt-Modell (DOM). Dadurch
kommt die Sprache den Erfordernissen der Programmierung stärker entgegen. Es werden zahlreiche neue, an der
Praxis orientierte Elemente eingeführt, die es erlauben, Webseiten semantisch ordentlicher zu strukturieren.
3.1 Neuerungen in HTML5 gegenüber HTML4
In der HTML Version 5.0 werden neue Funktionen definiert und den Entwicklern von Webseiten zur Verfügung
gestellt. Dies betrifft neue Elemente, Attribute und API's. Diese Funktionen erleichtern die Entwicklung von
interaktiven Webapplikationen. API's bezeichnen Programmierschnittstellen, welche es Softwareentwicklern
ermöglicht Anwendungen zu entwickeln und hierbei bestehende, standardisierte Bibliotheken zu nutzen. API's
stehen unter anderem für das Abspielen von Video- und Audiodateien mit den Elementen video und audio zu
Verfügung.
3.2 Verändertes Nutzerverhalten
Die Nutzung des Internet wird heute von Kommunikation und Gestaltung bestimmt. Neben den bekannten
Nutzungsmöglichkeiten, wie Informationsgewinnung durch Anschauen und Lesen von Webseiten, wurden neue
Möglichkeiten geschaffen. In der Weiterentwicklung des Internets wird der Nutzer animiert bei der Mitgestaltung
und Teilnahme am öffentlichen Meinungsaustausch mitzuwirken.
Beispiele dafür sind:
• Auf den Seiten von YouTube[7] und MyVideo[8] können Nutzer eigene Videos präsentieren und fremde
Videos anschauen.
• Wiki's [9] sind ein System von Webseiten, die geändert werden können. Der Benutzer kann Beiträge
erstellen und manipulieren.
• Blog's[10] sind tagesaktuelle Webseiten einer Person/Gruppe, die in Form von chronologischen Einträgen
eine Art Tagebuch führen z.B. um Alltagsgeschichten zu veröffentlichen.
2.3 Darstellung von Webseiten durch Browser
5
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 2[11]
3.3 Bedeutung von HTML5 für das Web 2.0
Der Begriff Web 2.0 ist nicht definiert, er wird als eine Beschreibung für die veränderte Nutzung des Internets
verwendet. Die Entwicklung zum Web 2.0 begann mit der Verwendung von AJAX (engl. Asynchronous
JavaScript and XML), einem Konzept für die Übertragung asynchroner Daten zwischen Browser und Server. Die
asynchrone Übertragung ermöglicht es Webseiten anzuzeigen und gleichzeitig HTTP-Anfragen durchzuführen.
Die feste Verbindung zur aufgerufenen Webseite wird dabei nicht unterbrochen.
Der Internetnutzer wird aktiv in die Gestaltung von Webseiten mit einbezogen. Er hat die Möglichkeit Inhalte von
Seiten zu bearbeiten, neue Inhalte zu erstellen und zu verteilen. HTML5 spezifiziert API's (engl. application
programming interface) für die standardisierte Erstellung von Applikationen.
3.2 Verändertes Nutzerverhalten
6
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 3[12]
4 Videoanwendungen in HTML5
4.1 Integration von Videos in HTML5 Webseiten
"Die Video-Ressource wird duch <video>...<video> markiert. Genau wie das audio-Element kann das
video-Element als Elementinhalt ein oder mehrere source-Elemente in Form von Standalone-Tags <source>
enthalten. Im einleitenden <video>-Tag geben Sie beim Attribut "src" die eigentlich gewünschte und bevorzugte
Video-Datei an, die abgespielt werden soll. In dem oder den source-Elementen, die ebenfalls je ein src-Attribut
haben, notieren Sie Video-Dateien mit gleichem Inhalt, aber anderen Video-Formaten. Das einleitende
<video>-Tag muss nicht zwangsläufig ein src Attribut enthalten."[13]
"Mit dem media-Attribut können Sie angeben, für welche Medientypen die Audio-Ressource geeignet ist. Die
Vorstellung ist media="all", also alle Medientypen.
Die Attribute type und media gibt es nur beim source-Element, nicht beim Video-Element. Der Grund ist, dass
beim video-Element beim src-Attribut nur Dateien angegeben werden sollten, die der Browser in jedem Fall
selbst erkennt. Greift er dagegen auf eine im alternativen source-Element angegebene Datei zurück, helfen die
zusätzlichen Attribute gegebenenfalls bei der Wahl eines externen Abspielprogramms."[14]
4.1.1 Beispiel für Webseiten (HTML Quelltext)
<!DOCTYPE HTML>
<html>
<head>
<title>This is a HTML 5 video example</title>
</head>
<body>
<video width="304" poster="playposter.jpg" controls>
<source src="TruthHappens.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="TruthHappens.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="TruthHappens.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object id="Object2" type="application/x-shockwave-flash" data="../videos/player_flv_classic.swf" wi
<noscript><a href="http://www.dvdvideosoft.com">free software</a></noscript>
<param name="movie" value="../videos/player_flv_classic.swf" />
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="configxml=../videos/TruthHappens.xml" />
</object>
</video>
</body>
</html>
3.3 Bedeutung von HTML5 für das Web 2.0
7
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
4.1.1.1 Darstellung Mozilla Firefox 3.6
Abbildung 4
4.1.1.2 Darstellung mit Microsoft IE 9 (Beta)
4.1.1 Beispiel für Webseiten (HTML Quelltext)
8
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 5
4.1.1.3 Darstellung Google Crome 8
Abbildung 6
4.1.1.2 Darstellung mit Microsoft IE 9 (Beta)
9
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
4.1.1.4 Darstellung Internet Explorer 8 (Flash video)
Abbildung 7
4.1.2 Attribute für Video-Elemente
Für die Darstellung von Videos innerhalb von HTML 5 wird das media-Element <video> verwendet. Analog zum
Element für Bilder in HTML 4.01 benötigt es das Attribut src, um den relativen oder absoluten Pfad zur einer
Videodatei dem Client zu übermitteln.
In der nachfolgenden Tabelle sind alle Attribute aufgeführt sowie Erläuterung zu Ihreren Auswirkungen,
Wechselbeziehungen untereinander und ihre evtl. Pflicht zur Notation:
4.1.1.4 Darstellung Internet Explorer 8 (Flash video)
10
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Attribut
src
height
width
poster
preload
autoplay
Werte
Beschreibung
Es ist notwendig dieses Attribut zu füllen, wenn keine weiteren Kindelemente <source>
innerhalb vom <video> tag definiert sind. Es wird hierbei als gesichert angesehen, dass der
• Pfad
Client Datei verarbeiten und abspielen kann.
Gibt die Höhe des Video auf dem Bildschirm an.
"Mit den Attributen "width" und "height" bestimmen Sie die Breite und Höhe der
Videoanzeige in Pixeln. Geben Sie bei diesem Attribut möglichst die tatsächliche Breite
• dimension
und Höhe des Videos an, um Verzerrungen zu vermeiden. Wie bei anderen Bereichen für
Medien, unterstützen Sie durch die Angabe von "width" und "height" den Browser beim
Bildschirmaufbau, während er die Webseite lädt."[15]
Gibt die Breite des Video auf dem Bildschirm an.
"Mit den Attributen "width" und "height" bestimmen Sie die Breite und Höhe der
Videoanzeige in Pixeln. Geben Sie bei diesem Attribut möglichst die tatsächliche Breite
• dimension
und Höhe des Videos an, um Verzerrungen zu vermeiden. Wie bei anderen Bereichen für
Medien, unterstützen Sie durch die Angabe von "width" und "height" den Browser beim
Bildschirmaufbau, während er die Webseite lädt."[16]
Definiert den Pfad zu einem Bild, das als Platzerhalter für das anzuzeigende Video
verwendet, bis das Video erstmalig geladen/gestartet ist. Es dient meist dafür, dem
Endbenutzer zu verdeutlichen, worum es sich bei dem Video handelt.
"Mit dem Attribut poster können Sie eine Grafik referenzieren, die angezeigt wird, solange
• Pfad
kein Video abgespielt wird. Sinnvollerweise enthält die Poster-Grafik einen
aussagekräftigen Screenshot aus dem Video. Alle üblichen Web-Grafikformate wie JPEG,
PNG oder GIF sind erlaubt. Für Wertzuweisungen an das poster-Attribut gelten die Regeln
für Referenzierung."[17]
Der Status none für dieses Attribute bedeutet, dass der Client nicht mit dem
Zwischenspeichern des Videos beginnen darf. Status Metadata weist den Client an nur die
Metainformationen wie z.B. Dateiformat, Videolänge, etc vorab aus der Videodatei zu
ermittelen. Automatic, welcher der Standartwert ist, bedeutet, dass es dem Client erlaubt ist
vorab das gesamte Video zwischenzuspeichern. Sinnvoll erscheint die Abweichung vom
Standartwert, um eine Performanceüberlastung am Server und bei der Bandbreite am
Client/Server zu vermeiden, wenn z.B. das Video nur optionaler Inhalt für den Entbenutzer
• none
ist, der auch dann expliziert für den interssierten User später erst nachgeladen werden kann.
• metadata
• automatic
"Wenn Sie das Standalone-Attribut "preload" angeben, beginnt der Browser sofort beim
Laden der Seite damit, den Inhalt des Videos downzuloaden. Die Angabe dieses Attributs
ist nur sinnvoll in Verbindung mit dem controlls-Attribut. Verwenden Sie es dann, wenn es
sehr wahrscheinlich ist, dass ein Anwender das Video abspielen wird. Das ist zum Beispiel
der Fall, wenn es der zentrale Inhalt der Seite ist."[18]
Boolescher Wert, der den Client anweist umittelbar nach dem Laden der Seite mit dem
• trueZwischenspeichern und dem Abspielen des Videos zu beginnen. Dabei kann das
• false
preload-Attribut hiermit überschrieben werden.
"Wenn Sie das Standalone-Attribut "autoplay" angeben, beginnt der Browser sofort beim
Laden der Seite mit der Wiedergabe des Videos. Wenn Sie kein Attribut "controls"
notieren, also keinen sichtbaren Player anzeigen wollen, und nur mit HTML, nicht mit
JavaScript arbeiten, müssen Sie das Attribut "autoplay" unbedingt notieren. Andernfalls
4.1.2 Attribute für Video-Elemente
11
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
loop
controls
wird das Video nicht abgespielt, und der Anwender kann das Video auch nicht starten."[19]
Boolscher Wert, der ein Wiederholung des Videos nach dem Abspielende innerhalb einer
Endlosschleife verursacht.
• true
• false
"Wenn Sie das Standalone-Attribut "loop" angeben, wird das Video immer wieder von
Neuem abgespsielt, sobald es zu Ende ist."[20]
Boolscher Wert, der dem Client mitteilt, das diese clientspezifische Bedienelemente
eingblendet und verwendet werden sollen wie z.B. Start,Pauseknopf. Alternativ können die
Bedienelemente via JavaScript und Events definiert werden.
• true"Wenn Sie das Standalone-Attribut "controls" angegeben, zeigt der Browser einen
• false
sichtbaren Player mit Grundfunktionen wie Pause/Weiterspielen, Lautstärkereglung und
Wiedergabe-Zeitanzeige an. Lassen Sie das controls-Attribut dagegen weg, wird das Video
ohne Player angezeigt. Der Anwender hat in diesem Fall keine Kontrollmöglichkeiten in
Bezug auf die Wiedergabe."[21]
"Mit "type" können Sie den MIME-Type der Video-Datei angeben. Im Zusammenhang mit
Videos kommen jene MIME-Typen in Frage, die mit "video/" beginnen, also z.B.
"video/mpeg/ für herkömmliche MPEG-Dateien, "video/quicktim" für MOV-Dateien oder
"video/x-msvideo" für AVI-Dateien. Wenn nötig, sollten Sie außerdem eine Codec-Angabe
innerhalb der type-Angabe notieren. Eine solche erweiterung der MIME-Type-Angabe wird
im RFC 4281 beschrieben."[22]
"Die HTML5-Spezifikation listet im Zusammenhang mit Video-Codecs folgende typische
Angaben für das type-Attribut auf:
type
• type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
• type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'
• type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'
• type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'
• type='video/mp4; codecs="mp4v.20.8, mp4a.40.2, mp4a.40.2"'
• type='video/mp4; codecs="mp4v.20.240, mp4a.40.2, mp4a.40.2"'
• type='video/3gpp; codecs="mp4v.20.8, samr"'
• type='video/ogg; codecs="theora, vorbis"'
• type='video/ogg; codecs="theora, speex"'
• type='video/ogg; codecs="dirac, vorbis"'
• type='video/x-matroska; codecs="theora, vorbis"'
Verwenden Sie diese Angaben jedoch nur, wenn Sie genau wissen, welche Codecs Ihre
Videos im Detail verwenden."[23]
media
"Die Attribute "type" und "media" gibt es nur beim source-Element, nicht beim
video-Element. Der Grund ist, dass beim video-Element beim src-Attribut nur Dateien
abgegeben werden sollten, die der Browser in jedem Fall selbst erkennt. Greift er dagegen
auf eine im alternativen source-Element angegebene Datei zurück, helfen die zusätzlichen
Attribute gegebenenfalls bei der Wahl eines externen Abspielprogramms"[24]
"Mit dem media-Attribut können Sie angeben, für welche Medientypen die
Audio-Ressource geeignetist. Die Voreinstellung media="all", also alle Medientypen. Beim
media-Attribut wird als Wert eine gültige Medienabfrage erwartet".[25]
4.1.2 Attribute für Video-Elemente
12
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Die Attribute "type" und "media" gibt es nur beim source-Element, nicht beim
video-Element. Der Grund ist, dass beim video-Element beim src-Attribut nur Dateien
abgegeben werden sollten, die der Browser in jedem Fall selbst erkennt. Greift er dagegen
auf eine im alternativen source-Element angegebene Datei zurück, helfen die zusätzlichen
Attribute gegebenenfalls bei der Wahl eines externen Abspielprogramms.[26]
Aufgrund der Problematik von verschiedensten unterstützten Containern und Codecformate innerhalb der
verschiedensten Browsern, darf das <video> element auch weitere verschiedene <source> Kindelemente
enthalten, die das einzelne src Attribute im <video> Element ersetzen. Es bietet dann die Möglichkeit die Datei in
verschiedenen Formate bereitzustellen. Der Browser durchläuft die Auflistung und verwendet, das erste
kompatible Format. Innerhalb des <source> Elements wird sodann mit dem Attribut src der Pfad zum Video
übermittelt. Zusätzlich gibt es das Attribut type für das <source> Element. Innerhalb des Attributwert wird der
Mime-Type sowie der verwendete Codec mittgeteilt. Bspl. video/mp4; codecs="avc1.42E01E, mp4a.40.2". Diese
Attribute ist vollständig ausgefüllt hilfreich für den Browser ein untersütztes Format breitbandschonend zu
erkennen (vgl. Metadata beim preload-Attribute). Der Aufbau dieses String ist dem RFC 4281 zu entnehmen.
Zum Abschluss kann im <video> Element weitere Elemente aufgenommen werden (z.B. aus HTML 4), die
angezeigt werden, sobald dies nicht vom Browser untersützt wird. Dies kann bspwl. eine Hinweisetext auf die
fehlende Unterstüzung sein, ein alternativer Link oder ein <object> Element, um auf proprietäre Plugins wie Flash
Videos für die Videodarstellung zurückzugreifen (siehe Beispiel).
4.1.3 Track-Kindelement
Als ausdrücklich optionales Kindelement gibt es das sogenannte <track> tag. Es kann nicht eigenständig
existieren und gibt synchron zum Video Zusatzinformationen/funktionen über das abzuspielende Video wie z.B.
Untertitel, Kaptielangaben, Situationbeschreibungen. Hilfreich sind diese bsplw. für Seh-, oder Hörbehinderte
oder für fremdsprachige Zuhörer. Folgende Tabelle listet die möglichen Attribute auf:
Attribut
src
kind
srclang
Werte
• Pfad
Beschreibung
Pflichtattribut, das den Pfad zu text track Datei angibt
• subtitles
• captions
Definiert die Art der Datei und in welcher Form diese verwendet werden kann. Das
Attribute ist optional und der Standard ist 'subtitles'.
• descriptions
• chapters
• metadata
Eine Sprachenangabe z.B. Deutsche nach der Formatierung RFC BCP47. Beispiel de-DE
• bcp47-Wert
für Deutsch in Deutschland.
label
freier Text, der dem User bei der Auswahl von text tracks angezeigt wird und einen
• freier
Hinweis auf seine Funktion gibt.
Text
default
boolescher Wert, der diesen text track als Standard auswählt und anwendet (wenn die
• true
Client-Preferenzen nicht ein anderes Element z.B. aufgrund der Sprache vorauswählt).
• false
Diese Dateien mit dem Begleittext wie der Untertitel sind dabei in WebVTT[1] formatiert. Das folgende Beispiel
besteht aus den Minimalanforderungen mit einer fesgestellten Reihenfolge, Zeitpunkte der Darstellung innerhalb
4.1.3 Track-Kindelement
13
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
des Videos und dem einfachen Text der angezeigt wird:
1
00:00:00,000 --> 00:00:14,000
Herzschlagton...
2
00:00:18,010 --> 00:00:19,000
Bild der Erde
3
00:00:20,010 --> 00:00:21,800
Wolken
4
00:00:38,100 --> 00:00:39,206
Ozeanriff, Trommelwirbel
5
00:00:43,010 --> 00:00:40,000
Embryo im Mutterleib
6
00:01:04,010 --> 00:01:11,000
Ein Telefon läutet...
7
00:01:11,010 --> 00:01:15,000
Mann nimmt Telefon ab, Teilnehmer: Komm mal bitte rüber, ich muß dich sprechen
4.2 JavaScript & Events
Mit der Erweiterung des HTML5-Standards, um das <video> Element, steht diese nun ebenfalls im sog. DOM
(Document Object Model), einem Interface das alle Elemente und ihre Attribute einer HTML-Seite innerhalb
einer baumstrukturartigen Auflistung zur Verfügung stellt. Es kann somit ebenfalls mit weiteren clientseitigen
Implementierung von JavaScript ausgelesen und nach dem Rendering der Seite verändert werden.
Dieses Verhalten wird bsplw. genutzt, um innerhalb von bereitgestellten Libaries von Drittanbietern
weitergehende Video-Player Frameworks bereitzustellen.
Beispiele hierfür sind eine Lautstärkenregeler oder die Abspielgeschwindigkeit zu ändern, um einen Effekt des
Vor- und Zurückspulens zu erzielen. Diese sind teilw. nicht Bestandteile der Standardbedienelemente von
Browsern.
In Javascript werden ein Attribute in sog. Interfaces definiert. Diese Definition ist Bestandteil des aktuellen editior
drafts 'A vocabulary and associated APIs for HTML and XHTML' vom W3C dokumentiert[27].
Dies Interface lässt sich in Funktionen mit und ohne Rückgabewerte, rein lesende und veränderbare Variablen, die
interaktiv nach dem Rendering der Webseite und zur Laufzeit des Videos modifiziert werden können und somit
einen Effekt für den Enbenutzer verurssachen (z.B. Start-,Stoppbutton für das Video).
Des weiteren lassen sich diese Einteilen in Fehlermeldung in Bezug auf das Videoelement (z.B. Codecformat
nicht ünterstüzt), Netzwerkstatus (z.B. werden noch Daten übertragen), Verfügbarkeitstatus (z.B. sind genügend
Daten zischengepuffert), Abspielstatis (z.B. aktuelle Abspielposition, Gesamtabspieldauer) des aktuell
4.2 JavaScript & Events
14
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
abgespielten Videos, Attribute aus Bedienelemente (z.B. Lautstärke erhöhen, lautlos stellen) sowie die einfachen
Funktionen zum Laden, Starten und Pausieren des Videos.
Das folgende Beispiel demonstriert die Anwendung von Javascript auf ein Video. Dabei wird eine Lauter-, Leise-,
Stummfunktion sowie ein Spulfunktion in einfacher Form implementiert:
<!DOCTYPE HTML>
<html>
<head>
<script type="application/javascript">
function Lauter(player)
{
// referenziere das Object in tmp
var tmp = document.getElementById(player);
//verändere die Lautstaerke
tmp.volume += 0.1;
}
function Leiser(player)
{
var tmp = document.getElementById(player);
tmp.volume -= 0.1;
}
function stumm(player)
{
var tmp = document.getElementById(player);
if (tmp.muted == 1)
{
tmp.muted = 0;
}
else
{
tmp.muted = 1;
}
}
function vorlauf(player,rate)
{
var tmp = document.getElementById(player);
//setze Abspielrate auf den neuen Wert; <1 zurückspulen, >1 vorspulen
//funktioniert nicht mit OGV-Quellen (https://developer.mozilla.org/en/nsIDOMHTMLMediaElement) im Fi
tmp.playbackRate = rate;
}
</script>
<title>This is a Javascript + HTML 5 video example</title>
</head>
<body>
<video id="video" width="304" poster="../images/playposter.jpg" controls>
<source src="../videos/TruthHappens.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"' />
<source src="../videos/TruthHappens.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="../videos/TruthHappens.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
4.2 JavaScript & Events
15
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
<a href="javascript:Lauter('video');">Lauter</a>
<a href="javascript:Leiser('video');">Leiser</a>
<a href="javascript:stumm('video');">Stumm</a>
<input name="geschwindigkeit" type="text" size="2" value="1" onchange="vorlauf('video',this.value);"
</body>
</html>
4.3 Unterstützung von Codecs durch Browser
"Ziel des video-Elements ist, dass alle Browser bestimmte Video-Formate ohne zusätzliche Software abspielen
können, also direkt in der Browser-Software implementieren. Das Problem beim video-Element sind dabei die
gleichen wie beim audio-Element. Geht es beim audio-Element um MP3 vs. OGG, so konkurrieren beim
video-Element MPEG-4 und OGG-Video (OGV). Die Situation ist die gleiche. Der Codec H.264, den MPEG-4
verwendet, ist durch Software-Patente geschützt. Der Theora-Codec für das OGG-Format ist hingegen patentfrei.
Während Microsoft, Google und Apple H.264 wegen dessen höherer Performanz favorisieren, weigern sich
Mozilla Firefox und Opera, diesen Codec in ihren Browsern zu implementieren, und setzen stattdessen auf den
OGG-Container mit Theora-Codec. Das Problem lässt sich in HTML5 immerhin lösen, in dem man beide
Formate vorhält und anbietet. Als Dauerlösung ist dies jedoch nicht befriedigend."[28]
"Der MS Internet kennt das video-Element bis einschließlich Version 8.0 überhaupt nicht."[29]
4.4 Bedienelemente zum Abspielen
Abbildung 8
Die Standard Bedienelemente eines Players in HTML sind unterschiedlich nach der Browserimplementierung.
Design und Farben unterscheiden sich ebenfalls. Gängige Bedienelemente sind:
1. Klickbutton um zwischen Start und Pause des Videos zu wechseln.
2. Laufzeitleiste mit Gesamtlaufzeitangabe sowie ein Regler, um innerhalb des Videos zu springen.
4.3 Unterstützung von Codecs durch Browser
16
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
3. Lautstärkenregel (wird im Beispiel nur sichtbar, sobald sich der Mauszeiger auf den Klickbutton Nr 4
befindet
4. Klickbutton zur Stummschaltung bzw. Reaktivierung von Ton
Bedienelemente werden oftmals auch als sog. OSD (engl. On Screen Display) angezeigt und überlagern das
Video, sobald man mit der Maus sich im Video-Fenster befindet.
4.5 Möglichkeit einer Alternativdarstellung bei Nichtunterstützung
Die erste W3C working drafts des HTML5-Standards stammt vom 22. Januar 2008[2]. Video-Portale wie
YouTube existieren bereits seit April/Mai 2005[3], so dass bereits vorher Lösung für die Alternativdarstellung
gab.
Da HTML-Versionen vor Version 4 keine Multimediaelemente definiert, griff man zurück auf
herstellerabhängige Lösungen. Hier sind zunächst die Video-Player der großen Herstellern zu nennen. Dies sind
bsplw. Windows Media Player von Microsoft, Apple Quicktime, RealPlayer von RealNetworks. Dies sind vom
Browser losgelöste Streaming-Clients, die nur über eine HTML Seite Ihre URI-Adresse erhalten und das Video
extern darstellen.
Innerhalb des Browser-Krieges zwischen Microsoft Internet Explorer und Netscape Navigator wurden von beiden
Herstellern eigene Elemente eingeführt. Während Netscape auf <embed> setzte, integrierte Microsoft mit dem
<object> und ActiveX Multimediainhalte. Mit HTML Version 4 ist das <object> code offizieller Bestandteil von
HTML, um externe Plugins einzubinden ohne selbst Funktionen für Video bereitzustellen.
Hersteller liefern nun Plugins für die verschiedensten Browser und Betriebsysteme, um innerhalb des <object>
Elements interaktive Inhalte wie Vectorgrafiken, Audio, Video darzustellen. Die bekanntesten sind Silverlight
von Microsoft und Flash von Adobe.
Vor allem Flash ist aufgrund der Integration in Portale wie YouTube und MyVideo, der frühen Verfügbarkeit
gegenüber Silverlight (2007) und der hohen Anzahl an kompatiblen Plattformen sehr verbreitet und zum
Quasistandard entwickelt.
Adobe beschreibt die Integration von Flashvideos in HTML in einem Supportartikel mit folgendem Quellcode: "
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400"
id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED href="/support/flash/ts/documents/myFlashMovie.swf"
quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.
</EMBED></OBJECT>
Why use these all these HTML tags? What do they do?
The OBJECT tag is for Internet Explorer 3.0 or later on Windows 9x/2000/NT/ME/XP platforms or any browser
that supports the use of the Flash ActiveX control. The "classid" must appear exactly as it does in this example.
The "codebase" attribute must also appear exactly as it does in this example; it tells the browser where to find
Flash Player for automatic download. Internet Explorer 3.0 or later on Windows 9x/2000/NT/ME/XP will prompt
the user with a dialog asking if they would like to auto-install the Flash Player if it's not already installed. This
4.4 Bedienelemente zum Abspielen
17
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
process can occur without the user having to restart the browser.
The EMBED tag is for Netscape Navigator 2.0 or later, or browsers that support the use of the
Netscape-compatible plugin version of Flash Player. The "pluginspage" attribute tells the browser where to direct
the user to find Flash Player for download if the Player is not already installed. The user would then need to
download and run the installer and restart their browser.
To ensure that the most browsers will play your Flash Player movies, you should place the EMBED tag nested
within the OBJECT tag as shown in the above example. ActiveX-enabled browsers will"ignore" the EMBED tag
inside the OBJECT tag. Netscape and Microsoft browsers using the Flash Plugin will not recognize the OBJECT
tag and will read only the EMBED tag."[30]
Zusammenfassend verwenden ActiveX Browser wie der Internet Explorer das <object> Element mit der
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" als Attribut während Netscape (wie u.a. Firefox)
das <embed> Element nutzt. Aufgrund der Schwíerigkeiten der unterschiedlichen Implementierungen für die
verschiedenen Browser entwickelte u.a. Google im Projekt swfobject eine JavaScript-Framework, um die
Integration zu erleichtern. Weitere Player-Frameworks in Kapitel 5 besitzen ebenfalls ein Rückfallmöglichkeit zu
Flash.
5 Darstellung von Videoanwendungen in
HTML5-Player-Frameworks
"Es ist möglich, CSS-Eigenschaften auf das video-Element anzuwenden, doch damit ist das Aussehen des Players
nur bedingt beeinflussbar. Um eigene Player zu kreieren, müssen Sie auf Scripting zurückgreifen."[31]
Anwender, mit geringen Kenntnissen im Bereich Programmierung, können auf eine Reihe von Playern zur
Integration auf Webseiten zurückgreifen, die auch zum Teil komerziell angeboten werden.
Hier eine Übersicht über die gängigsten HTML5 Media Player:
YouTube HTML5 Player
Abbildung 9[32][33]
4.5 Möglichkeit einer Alternativdarstellung bei Nichtunterstützung
18
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
"Verfügt man über einen entsprechenden Browser, beispielsweise Firefox 4 (WebM), Google Chrome (WebM
und h.264), Opera 10.6 (WebM), etc. und den jeweils unterstützten Videocodecs, kann man statt des
herkömmlichen Flashplayers für die meisten Videos auch den YouTube HTML5 Videoplayer nutzen."[34]
Unterstützte Browser:
Es werden Browser unterstützt, die sowohl das Video-Tag in HTML5 als auch den Video-Codec h.264 oder das
WebM-Format (mit dem Codec VP8) unterstützen. Hierzu zählen:
• Firefox 4 (WebM, Beta-Version hier verfügbar)
• Google Chrome (WebM und H.264)
• Opera 10.6 oder höher (WebM, hier verfügbar)
• Apple Safari (h.264, Version 4+)
• Microsoft Internet Explorer 9 (h.264, Beta available here)
• Microsoft Internet Explorer 6, 7 oder 8 mit installiertem Google Chrome Frame (Google Chrome Frame
herunterladen)
Hinweise des Herstellers:
• Die Vollbildanzeige wird nun teilweise unterstützt. Durch Klicken auf die Vollbildschaltfläche wird der
Player auf die gesamte Browsergröße maximiert. Wenn dein Browser eine Vollbildoption unterstützt,
kannst du auf diese Weise den gesamten Bildschirm nutzen.
• Auf der Steuerleiste des HTML5-Players wird ein entsprechendes Erkennungszeichen angezeigt. Solltest
du das "HTML5"-Symbol auf der Steuerleiste nicht sehen, wurdest du (aufgrund der unten aufgelisteten
Beschränkungen) auf den Flash-Player umgeleitet.
• Im HTML5-Player wird auch ein Erkennungszeichen angezeigt, das angibt, dass das Video das
WebM-Format verwendet. Solltest du das "WebM"-Symbol nicht sehen, ist das Video mit h.264 codiert.
• Wenn du nach Videos mit verfügbaren WebM-Formaten suchen möchtest, kannst du dazu die Optionen
der erweiterten Suche verwenden (oder hänge einfach &webm;=1 an jede beliebige Such-URL an).
Zusätzliche Beschränkungen des Herstellers:
• Videos mit Anzeigen werden nicht unterstützt (sie werden im Flash Player abgespielt).
• In Firefox und Opera werden nur Videos mit WebM-Transcodierung in HTML5 abgespielt.
• Falls du an anderen TestTube-Experimenten teilnimmst, ist es möglich, dass du den HTML5-Player nicht
testen kannst (Feather wird allerdings unterstützt).
Quelle: http://www.youtube.com/html5
Quelle: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
Vimeo HTML5 Player
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
19
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 10[35]
"Der sich derzeit noch im Beta-Status befindenden Player läuft auf den aktuellsten Versionen der Browser Safari,
Chrome und IE (mit installiertem Chrome Frame). Um den HTML5 Player von Vimeo zu nutzen bzw. zu testen,
kann man innerhalb jedes Vimeo-Videos im unteren Bereich auf den Button "Switch to HTML5 player"
klicken."[36]
Video JS
Abbildung 11[37][38]
"Video JS ist ein Javascript basierter Videoplayer bestehend aus drei Teilen: Dem eingebundenen Code (Video
for Everybody), einer Javascript Bibliothek (video.js) und einem reinen HTML/CSS Skin (video-js.css)"[39]
• Free & Open Source
• Leichtgewicht: KEINE BILDER WERDEN VERWENDET
• 100% skinnable durch CSS
• Bibliotheksunabhängig
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
20
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
• Leicht zu nutzen
• Sehr verständlich & einfach zu erweitern
• Konsistenter Look in allen unterstützenden Browsern
• Full Screen und Full Window Modus
• Lautstärken-Kontrolle
• Flash Fallback (auch bei Verwendung einer nicht unterstützten Quelle)"
Quelle: http://videojs.com/
Quelle: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
Die implementierung erachtet sich für Fortgeschrittene User als trivial und kann auch hervorragend im
komerziellen Bereich verwendet werden. Es folgt ein Codebeispiel. Für die Verwendung muss die aktuellste
Version von VideoJS verwendet werden:
1. Einbinden der Stylesheet Datei:
<head>
...
<script src="video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="
...
</head>
2. Implementierung eines Javascripts, zur nutzung der Umgebung:
<script type="text/javascript" charset="utf-8">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
3. Implikation der Ressourcen:
<video class="video-js" width="640" controls preload poster="http://video-js.zencoder.com/oceans-cl
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'
<object class="vjs-flash-fallback" width="640" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {
js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" alt="Poster Image" title="No vi
playback capabilities." />
</object>
</video>
Quelle: http://videojs.com/
JW Player for HTML5
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
21
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 12[40][41]
"Der JW Player ein komplett skinnbasierter und konfigurierbarer Videoplayer, umgesetzt in Javascript (jQuery)
und ermöglicht bei Bedarf einen übergangslosen Fallback auf den beliebten JW Player für Flash."[42]
Quelle: http://www.longtailvideo.com/support/jw-player/jw-player-for-html5
Video for Everybody!
Abbildung 13[43][44]
Der Webmediaplayer "Video for Everybody!" wird von der Firma Camendesign angeboten und bietet
umfangreiche Möglichkeiten im Bereich Custom-Design:
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
22
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
"Video for Everybody! ermöglicht durch die einfache Einbindung von HTML5-Code die Integration von Videos
auf entsprechenden Webseiten. Der Video-Player bietet ebenfalls einen automatischen Flash-Fallback ohne
JavaScript oder Browser-Sniffing zu bemühen. Darüber hinaus funktioniert dieser Player ebenfalls in
RSS-Readern und auf dem iPhone, auf dem iPad, sowie auf vielen Browsern und Plattformen."[45]
Zum generieren des Codes wird sogar ein Generator von dem Programmierer Jonathan Neal bereitgestellt:
Der Code könnte wie folgt implementiert werden:
<video width="640" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
Quelle: http://camendesign.com/code/video_for_everybody
Ambilight for Video Tag
Abbildung 14[46][47]
Der Ambilight-Player ist ein zwar simpler, jedoch optisch sehr ansprechender Webmediaplayer und wird von dem
in Russland ansässigen Programierer-Team Chikuyonok zur Verfügung gestellt.
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
23
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 15[48][49]
"Ambilight ist ein einfacher Videoplayer der die Einbindung von HTML5 Video ermöglicht und sich dadurch
abhebt, dass er an den Rändern in Abhängigkeit der Farbgebung im Video die Durchschnitts-Farben im
Ambilight-Style darstellt."[50]
FlareVideo
Abbildung 16[51][52]
"FlareVideo ist ein Open-Source-Projekt und auf jQuery-basierender HTML5 Video Player, der über einen
Fullscreen-Modus und Flash-Fallback-Mechanismus verfügt."[53]
• HTML5 Video mit Flash-Fallback
• Einfache CSS/HTML/JS Anpassung und Möglichkeit Themes zu erstellen
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
24
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
• Full-Screen Unterstützung
• Komplett Open-Source und kostenlos, auch für den kommerziellen Einsatz
Quelle: http://flarevideo.com/
Quelle: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
VP Factory
Abbildung 17[54][55]
"VP Factory unterscheidet sich generell dadurch, dass es eine komplett cloud-basierte
Video-Management-Applikation darstellt mit einem flexibel anpassbaren Video Player und jeder Menge weiterer
Features."[56]
Quelle: http://www.vpfactory.com/
Quelle: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
SublimeVideo
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
25
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Abbildung 18[57][58]
Abbildung 19[59]
Videobeispiel: http://medias.jilion.com/sublimevideo/dartmoor.ogv
"Der Sublime Video-Player befindet sich noch im Experimentier-Stadium und unterstützt derzeit nur eine
bestimmte Anzahl von Browsern. Das langfristige Ziel der Entwickler ist es jedoch SublimeVideo für alle
modernen Browsern lauffähig umzusetzen. Darüber hinaus soll der Videoplayer demnächst frei erhältlich
angeboten werden, zumindest für nicht-kommerzielle Zwecke."[60]
"Ansonsten erlaubt der Sublime Videoplayer das einfache Einbinden von Videos in Blogs bzw. Websites die den
modernen Webstandards entsprechen."[61]
• Full-Window Modus
• HTML5 Video mit seinen Vorteilen
• Kein Browser-Plugin notwendig
• Keine Flash-Abhängigkeit
• Beliebiges Anwählen einer bestimmten Stelle im Video ohne Bufferung
• Full-Screen Modus
5 Darstellung von Videoanwendungen inHTML5-Player-Frameworks
26
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Quelle: http://blog.jilion.com/2010/01/25/introducing-sublimevideo
Quelle: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
5.1 HTML5 Unterstützung durch Webbrowser
"HTML5 (seit 2007 in Entwicklung) ist der neue HTML-Standard. In dieser Version wird die Sprache formal
nicht mehr als SHML-Dokumenttyp definiert, sondern als Dokument-Objekt-Modell (DOM). Dadurch kommt die
Sprache den Erfordernissen der Programmierung stärker entgegen."[62]
Aus diesem Grunde hat sich HTML5, sowie XHTML5 entsprechend der Erwartungen in den gängigen
Internet-Browsern durchgesetzt und wurde ab den wie im Folgenden aufgezählten Versionen implementiert:
Modzilla - Firefox...................: v3.5
Google - Chrome...................: v4.0
Apple - Safari.........................: v4.0
Opera Software - Opera........: v10.0
In Anlehnung an: Stefan Münz/Clemens et al. (2010), S. 208
Abbildung ohne Bezeichnung
5.2 Möglichkeit des Hostens von Videos durch Webseitenbetreiber
Es gibt in Bezug auf den Serverzugriff nur zwei gängige Modelle:
Bei Modell Nr. 1, welches die trivialste Möglichkeit darstellt, werden die Daten direkt auf dem Webserver
gehostet, das heißt die Daten bzw. Videos liegen in einem Verzeichnis auf einem Webserver, mit welchem das
HTML5-Framework wiederum verlinkt ist.
Abbildung 20
5.1 HTML5 Unterstützung durch Webbrowser
27
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Bei Modell Nr. 2, werden die Daten bzw. Videos in einer Datenbank gespeichert. In diesem Fall, muss mit Hilfe
eines Scriptes, welches beispielsweise in Java geschrieben werden kann, die Anfrage auf die Video-Dateien
zwischengespeichert werden. Dieser Vorgang wird als Preloading bezeichet.
Sind die Video-Dateien komplett geladen, werden diese in einem virtuellen Verzeichniss zwischengespeichert,
welches mit dem HTML5-Script verlinkt ist.
Gegebenenfalls werden auch mehrere Teilvideos von dem Script erstellt, um ein Streamingverhalten zu
simulieren. Wenn eines dieser Teilvideos komplett gesehen wurde, wird mit Hilfe des Token-Prinzips (ein
Standard für Indexverschiebungen), an das nächte Teilvideo verwiesen, anseiden das gesamte Video wurde
bereits gedownloadet. In diesem Fall wird das komplett geladene Video, ab dem nächsten "Token-Sprung", an der
entsprechend errechneten Video-Wiedergabezeit zwischengeschaltet.
Diese Technik eignet sich besonders für Mobile-Endgeräte, da die Videos über entsprechende
Webservice-Technologien abgefragt werden können. Dieses Prinzip stammt ursprünglich aus dem Bereich der
Flash-Video-Technologie und wird seit dem erscheinen der HTML5-Technologie auch auf dieses Verfahren
angewendet.
Abbildung 21
5.2.1 Vorteile
• Triviale Anwendung
• keine zusätzlichen Plug-Ins für Webbrowser werden benötigt
5.2 Möglichkeit des Hostens von Videos durch Webseitenbetreiber
28
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
5.2.2 Nachteile
• Videos müssen auf Grund der von den Browserherstellern zum Teil unterschiedlich verwendeten Codecs,
mehrfach auf den Servern hinterlegt werden.
• Aus dem vorhergendenden Stichpunkt resultierender hoher Verbrauch an Speicherkapazität auf den
Host-Servern, aufgrund der redundanten Auslegung der Videos in verschiedenen Formaten.
• Der Player ist nur bedingt Editationsfähig.
• In Verbindung mit Microsoft Betriebssystemen sind gewisse Sicherheitsprobleme gewährleistet.
6 Entwicklung und Zukunft von HTML5 im Bezug auf Video
Die derzeitige Entwicklung von HTML5, insbesondere der Bereich Video, befindet sich auf dem Vormarsch. Der
wohl bedeutenste Grund hierfür, ist die Ablehnung der Flash-Technologie auf dem System iOS der Firma Apple.
Dieses System dient als Betriebssystem für die komerziell höchst erfolgreichen Produkte, dem Apple iPhone,
sowie dem Apple iPad. Steve Jobs, der Gründer der Firma Apple, nimmt in einem im Internet veröffentlichten
Schreiben, einem sogenannten "offenen Brief", Stellung bezüglich der Entwicklung von HTML5 mit Blick auf die
Zukunft. Auch wenn der Brief einen starken Bezug auf das Ausgrenzen der Flash-Technologie hat, bezeichnet er
in diesem HTML5 als die Technologie der Zukunft und kündigt an, auch in Zukunft auf die HTML5-Technologie
bzw. entsprechende Folgeversionen zu setzen.
Abbildung 22
Aus diesem Grunde ist die HTML5-Technologie derzeit auf dem Weltweiten Markt nicht wegzudenken. Auf
Grund der trivialen Anwendung, erfährt die HTML5-Technologie auch bei privaten Anwendern Verbreitung und
eignet sich im professionellen Bereich auch sehr gut für Script-Technologien zur Webseitengeneration.
Der Stichpunkt Webseitengeneration, ist auch besonders interessant für die Entwicklung der Technologien in dem
stark wachsenden und auch komerziell bedeutenden Markt der Sozialen-Netzwerke (engl. social networks). Da
sich diese Technologien, stark mit durch den Anwender selbst editierten Webseiten beschäftigt, spielt der
Stichpunkt Webseitengeneration eine wichtige Rolle, da viele Benutzer nur eingeschränkte Fähigkeiten im
Bereich HTML und Webdesign besitzen. Durch die HTML5-Technologie, wird die Einbindung interaktiver
Medien, noch stärkere Verbreitung im Bereich der Sozialen-Netzwerke finden. Software-Tools zur
Videokonvertierung, welche sich auf den Servern der Netzwerkbetreiber befinden, ermöglichen dem Nutzer des
Sozialen-Netzwerkes nahezu jeden Videotyp hochzuladen. Dieser wird im Hintergrund, dem sogenannten
"Backend", in die drei für HTML5 verwendeten Codectypen konvertiert. Im Anschluss werden die Video-Files
auf einem Server oder in einer Datenbank, wie in Gliederpunkt Nr. 5.2 beschrieben, gespeichert und es wird über
einen Script der entsprechenden HTML5-Code auf der Seite des Nutzers zur Verfügung gestellt.
5.2.2 Nachteile
29
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
Link des offenen Briefes von Steve Jobs auf der Applehompage ( Keine temporäre Garantie ):
http://www.apple.com/hotnews/thoughts-on-flash/
7 Fazit/Raum für weitere Untersuchungen
Die Videofunktion innerhalb von HTML5 ist ein wichtiger Bestandteil des zukünftigen HTML-Standards. Sie ist
lange erwartet und notwendig, um proprietäre Lösungen wie Flash endgültig abzulösen und das Medium Internet
mit allen seiner Vielfalt, offener zu gestalten und neuen Teilnehmnern zu öffnen. Streitigkeiten und
Machtinteressen wie zwischen und Apple und Adobe, die keinen Client für das beliebte Apple iPhone entwickeln,
können damit vermieden werden. Der Streit über die Unterstützung der Containerformate und Codecs durch die
verschiedenen Browser ist zur Zeit zwar immer noch ein Problem, wird sich unserer Einschätzung nach jedoch
langfristig an der Kostenfrage für die Erstellung und die Auslieferung von Videos richten. Die Patenthalter der
lizenzpflichtigen Codecs werden hier noch stark unter Druck geraten.
Nach Abschluss dieser Studie besteht jedoch auch noch Raum für weitere Untersuchungen. Aus Sicht der Autoren
sind hier Punkte zu nennen wie z.B. HD (High-Definition), DRM (Digital Rights Management) und
Streamingfunktion. In diesem Rahmen könnten auch noch weitere Studien im Bereich Databinding,
wsdl-Implikation und Database-Performance in Bezug auf BlaseDS-Pushing durchgeführt werden.
Die HTML5-Videotechnologie ist allerdings abschließend als ein großer Schritt in Richtung
Internet-Video-Standard zu bezeichnen.
8 Anhang
8.1 Quellenverzeichnis
8.1.1 Fußnoten
1. ? Vgl. Information Management: A Proposal http://www.w3.org/History/1989/proposal.html
2. ? Vgl.HTML 4.01 Specification W3C Recommendation (Stand 10.01.2011)
http://www.w3.org/TR/1999/REC-html401-19991224/
3. ? Vgl. Stefan Münz/Clemens, Gull (2010), Seite 21
4. ? Stefan, Münz/Clemens, Gull (2010), Seite 28
5. ? Vgl Stefan, Münz/Clemens, Gull (2010), Seite 60
6. ? Vgl. http://de.selfhtml.org/intro/hilfsmittel/software.htm#browser, 12.1.2011
7. ? http://www.youtube.com/?gl=DE&hl=de, 12.1.2011
8. ? http://www.myvideo.de/, 12.1.2011
9. ? http://de.wikipedia.org/wiki/Wiki, 12.1.2011
10. ? http://de.wikipedia.org/wiki/Blog, 12.1.2011
11. ? Studie result GmbH, Seite 19
12. ? Studie result GmbH, Seite 9
13. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
14. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
15. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
6 Entwicklung und Zukunft von HTML5 im Bezug auf Video
30
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
16. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
17. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
18. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
19. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
20. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
21. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
22. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
23. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
24. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
25. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
26. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
27. ? Vgl. A vocabulary and associated APIs for HTML and XHTML
http://www.w3.org/TR/html5/video.html#media-elements
28. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
29. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
30. ? Zitat: Adobe Corp. Doc ID tn_4150 (Stand 28.09.2010) http://kb2.adobe.com/cps/415/tn_4150.html
31. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
32. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
33. ? Abbildung der Internetseite: http://www.youtube.com/html5l
34. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
35. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
36. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
37. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
38. ? Abbildung der Internetseite: http://videojs.com/
39. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
40. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
41. ? Abbildung der Internetseite: http://www.longtailvideo.com/support/jw-player/jw-player-for-html5
42. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
43. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
44. ? Abbildung der Internetseite: http://camendesign.com/code/video_for_everybody
45. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
46. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
47. ? Abbildung der Internetseite: http://media.chikuyonok.ru/ambilight/
48. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
49. ? Abbildung der Internetseite: http://media.chikuyonok.ru/ambilight/
50. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
51. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
8.1.1 Fußnoten
31
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
52. ? Abbildung der Internetseite: http://flarevideo.com/
53. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
54. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
55. ? Abbildung der Internetseite: http://www.vpfactory.com/
56. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
57. ? Abbildung der Internetseite:
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
58. ? Abbildung der Internetseite: http://www.vpfactory.com/
59. ? Abbildung der Internetseite: http://medias.jilion.com/sublimevideo/dartmoor.ogv
60. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
61. ? Zitat: Thomas Soyter, www.webmasterpro.de,
http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
62. ? Zitat: Stefan Münz/Clemens, Gull (2010), Seite 20
8.1.2 Literaturnachweis
Stefan, Münz/Clemens, Gull: HTML5 Handbuch: Die Webgrammatik für das Internet der Zukunft, Franzis
Verlag GmbH, 85586 Poing, 2010
"Web 2.0" Begriffsdefinition und eine Analyse der Auswirkungen auf das allgemeine Mediennutzverhalten,
result GmbH, 50823 Köln, 2007
http://de.selfhtml.org/index.htm
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video
8.1.3 Abkürzungsverzeichnis
Abkürzung
SGML
API
HTML
W3C
IE
OSD
Mime
MP3
CSS
DRM
Codec
HD
Nr.
etc.
bzw.
Bedeutung
Generalized Markup Language
application programming interface
Hypertext Markup Language
World Wide Web Consortium
Internet Explorer
Onscreen Display
Multipurpose Internet Mail Extensions
MPEG-1 Audio Layer 3
Cascading Style Sheets
Digital Rights Management
Coder/Decoder
High Definition
Nummeret cetera
et cetera
beziehungsweise
8.1.2 Literaturnachweis
32
Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video
SHML
DOM
URI
wsdl
statisches HTML
Dokument-Objekt-Modell
Uniform Resource IdentifierWeb Services Description Language
Web Services Description Language
8.2 Abbildungsverzeichnis
Abb.-Nr.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Abbildung
Aufbau einer Webseite
Anwendungsfelder "Web 2.0"-Nutzer
Web 2.0 in zwei Demensionen
Darstellungsbeipspiele Mozilla Firefox 3.6
Darstellung mit Microsoft IE 9 (Beta)
Darstellung Google Crome 8
Darstellung Internet Explorer 8 (Flash video)
Bereiche einer Bedienoberfläche im Firefox
Bereiche einer Bedienoberfläche im Firefox
Vimeo Player
Video JS Player
JW Player
Video for Everybody Player
Ambilight Player
Ambilight Player Nr 2
FlareVideo Player
VP Factory Player
Sublime Player
Sublime Player Nr 2
Server-Client-Modell
Datenbank-Server-Client-Modell
Adobe vs Apple
8.1.3 Abkürzungsverzeichnis
33