Analyse der Funktionen und Demonstrationen von HTML5 im Hinblick auf Video
Aus Winfwiki
|
Fallstudienarbeit | |
| Hochschule: | Hochschule für Oekonomie & Management |
| Standort: | Hamburg |
| Studiengang: | Bachelor Wirtschaftsinformatik |
| Veranstaltung: | Fallstudie / Wissenschaftliches Arbeiten |
| Betreuer: | Prof._Dr._Uwe_Kern |
| Typ: | Fallstudienarbeit |
| Themengebiet: | HTML 5 |
| Autor(en): | Andreas Auls, Jörg Loges, Ole Brüns |
| Studienzeitmodell: | Abendstudium |
| Semesterbezeichnung: | WS10 |
| Studiensemester: | 2 |
| Bearbeitungsstatus: | begutachtet |
| Prüfungstermin: | 31.01.2011 |
| Abgabetermin: | 16.01.2011 |
FOM Hamburg Abendstudium
Autoren: Andreas Auls, Ole Brüns, Jörg Loges
Präsentation
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 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:
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 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.
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.
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" height="192" 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" width="480" height="360"> <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>
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
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:
| Attribut | Werte | Beschreibung |
|---|---|---|
| src |
| 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 Client Datei verarbeiten und abspielen kann. |
| height |
| 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 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] |
| width |
| 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 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] |
| poster |
| 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 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] |
| preload |
| 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 ist, der auch dann expliziert für den interssierten User später erst nachgeladen werden kann.
"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] |
| autoplay |
| Boolescher Wert, der den Client anweist umittelbar nach dem Laden der Seite mit dem Zwischenspeichern und dem Abspielen des Videos zu beginnen. Dabei kann das 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 wird das Video nicht abgespielt, und der Anwender kann das Video auch nicht starten."[19] |
| loop |
| Boolscher Wert, der ein Wiederholung des Videos nach dem Abspielende innerhalb einer Endlosschleife verursacht.
"Wenn Sie das Standalone-Attribut "loop" angeben, wird das Video immer wieder von Neuem abgespsielt, sobald es zu Ende ist."[20] |
| controls |
| 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.
"Wenn Sie das Standalone-Attribut "controls" angegeben, zeigt der Browser einen 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] |
| type | "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:
"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] | |
| media | "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]
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 | Werte | Beschreibung |
|---|---|---|
| src |
| Pflichtattribut, das den Pfad zu text track Datei angibt |
| kind |
| Definiert die Art der Datei und in welcher Form diese verwendet werden kann. Das Attribute ist optional und der Standard ist 'subtitles'. |
| srclang |
| Eine Sprachenangabe z.B. Deutsche nach der Formatierung RFC BCP47. Beispiel de-DE für Deutsch in Deutschland. |
| label |
| freier Text, der dem User bei der Auswahl von text tracks angezeigt wird und einen Hinweis auf seine Funktion gibt. |
| default |
| boolescher Wert, der diesen text track als Standard auswählt und anwendet (wenn die Client-Preferenzen nicht ein anderes Element z.B. aufgrund der Sprache vorauswählt). |
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 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 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 Firefox
tmp.playbackRate = rate;
}
</script>
<title>This is a Javascript + HTML 5 video example</title>
</head>
<body>
<video id="video" width="304" height="192" 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>
<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
Die Standard Bedienelemente eines Players in HTML sind unterschiedlich nach der Browserimplementierung. Design und Farben unterscheiden sich ebenfalls. Gängige Bedienelemente sind:
- Klickbutton um zwischen Start und Pause des Videos zu wechseln.
- Laufzeitleiste mit Gesamtlaufzeitangabe sowie ein Regler, um innerhalb des Videos zu springen.
- Lautstärkenregel (wird im Beispiel nur sichtbar, sobald sich der Mauszeiger auf den Klickbutton Nr 4 befindet
- 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.com/go/getflashplayer"> </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 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
"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
"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
"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
- 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="utf-8"> ... </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" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <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" height="264" 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", {"url": "http://video- js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' /> <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." /> </object> </video>
Quelle: http://videojs.com/
JW Player for HTML5
"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!
Der Webmediaplayer "Video for Everybody!" wird von der Firma Camendesign angeboten und bietet umfangreiche Möglichkeiten im Bereich Custom-Design:
"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" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" 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" height="360" 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
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.
"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
"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
- 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
"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
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
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.
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.
5.2.1 Vorteile
- Triviale Anwendung
- keine zusätzlichen Plug-Ins für Webbrowser werden benötigt
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.
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.
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
- ↑ Vgl. Information Management: A Proposal http://www.w3.org/History/1989/proposal.html
- ↑ Vgl.HTML 4.01 Specification W3C Recommendation (Stand 10.01.2011) http://www.w3.org/TR/1999/REC-html401-19991224/
- ↑ Vgl. Stefan Münz/Clemens, Gull (2010), Seite 21
- ↑ Stefan, Münz/Clemens, Gull (2010), Seite 28
- ↑ Vgl Stefan, Münz/Clemens, Gull (2010), Seite 60
- ↑ Vgl. http://de.selfhtml.org/intro/hilfsmittel/software.htm#browser, 12.1.2011
- ↑ http://www.youtube.com/?gl=DE&hl=de, 12.1.2011
- ↑ http://www.myvideo.de/, 12.1.2011
- ↑ http://de.wikipedia.org/wiki/Wiki, 12.1.2011
- ↑ http://de.wikipedia.org/wiki/Blog, 12.1.2011
- ↑ Studie result GmbH, Seite 19
- ↑ Studie result GmbH, Seite 9
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 206
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 207
- ↑ Vgl. A vocabulary and associated APIs for HTML and XHTML http://www.w3.org/TR/html5/video.html#media-elements
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
- ↑ Zitat: Adobe Corp. Doc ID tn_4150 (Stand 28.09.2010) http://kb2.adobe.com/cps/415/tn_4150.html
- ↑ Zitat: Stefan Münz/Clemens, Gull (2010), Seite 205
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.youtube.com/html5l
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://videojs.com/
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.longtailvideo.com/support/jw-player/jw-player-for-html5
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://camendesign.com/code/video_for_everybody
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://media.chikuyonok.ru/ambilight/
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://media.chikuyonok.ru/ambilight/
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://flarevideo.com/
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.vpfactory.com/
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Abbildung der Internetseite: http://www.vpfactory.com/
- ↑ Abbildung der Internetseite: http://medias.jilion.com/sublimevideo/dartmoor.ogv
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ Zitat: Thomas Soyter, www.webmasterpro.de, http://www.webmasterpro.de/portal/article/html5-10-video-media-player-in-der-uebersicht.html
- ↑ 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 | Bedeutung |
|---|---|
| SGML | Generalized Markup Language |
| API | application programming interface |
| HTML | Hypertext Markup Language |
| W3C | World Wide Web Consortium |
| IE | Internet Explorer |
| OSD | Onscreen Display |
| Mime | Multipurpose Internet Mail Extensions |
| MP3 | MPEG-1 Audio Layer 3 |
| CSS | Cascading Style Sheets |
| DRM | Digital Rights Management |
| Codec | Coder/Decoder |
| HD | High Definition |
| Nr. | Nummeret cetera |
| etc. | et cetera |
| bzw. | beziehungsweise |
| SHML | statisches HTML |
| DOM | Dokument-Objekt-Modell |
| URI | Uniform Resource IdentifierWeb Services Description Language |
| wsdl | Web Services Description Language |
8.2 Abbildungsverzeichnis
| Abb.-Nr. | Abbildung |
|---|---|
| 1 | Aufbau einer Webseite |
| 2 | Anwendungsfelder "Web 2.0"-Nutzer |
| 3 | Web 2.0 in zwei Demensionen |
| 4 | Darstellungsbeipspiele Mozilla Firefox 3.6 |
| 5 | Darstellung mit Microsoft IE 9 (Beta) |
| 6 | Darstellung Google Crome 8 |
| 7 | Darstellung Internet Explorer 8 (Flash video) |
| 8 | Bereiche einer Bedienoberfläche im Firefox |
| 9 | Bereiche einer Bedienoberfläche im Firefox |
| 10 | Vimeo Player |
| 11 | Video JS Player |
| 12 | JW Player |
| 13 | Video for Everybody Player |
| 14 | Ambilight Player |
| 15 | Ambilight Player Nr 2 |
| 16 | FlareVideo Player |
| 17 | VP Factory Player |
| 18 | Sublime Player |
| 19 | Sublime Player Nr 2 |
| 20 | Server-Client-Modell |
| 21 | Datenbank-Server-Client-Modell |
| 22 | Adobe vs Apple |
