HTML5 Video-Einbindung per VIDEO-Tag (Stand Mai 2010)
=====================================================

1.	Ansatz
--------------

Etliche Jahre später als es Microsoft getan hat, wurde nun Sound und Video als HTML-Tag
eingeführt und dabei die Schnittstelle von Microsoft unnötig gemacht.

Im Zuge der Verbreitung von HTML5, das Mediadaten anzeigen kann, wurde Codec (Vorschriften
zur Art der Medien) benötigt, der ebenfalls verbreitbar ist, wobei entweder keine oder
zeitweise oder immer Lizenzgebühren fällig werden.

Es gibt Browserhersteller, die haben sich der Implementation von HTML 5 angeschlossen oder
auch nicht. Zu letzteren gehört Microsoft als Vertreter von Unternehmen, die ihre Produkte
direkt oder indirekt gegen Entgelt verwerten und Kunden an Produkte binden wollen.

Die Verbreitung von Media per HTML 5 ist nur in Form der Codecs von www.xiph.org möglich
(oga, ogv, theora).

Microsoft und andere Lizenzgeber planen, HTML 5 um den H264-Codec zu erweitern, der auf
Verwertung per Lizenzrecht basiert und zum Zweck der Verbreitung wie folgt offeriert wird:
	zeitweise von Entgelten befreit,
	Einbindung des Codes in Windows, das Payware ist (indirekte Lizenzverwertung).
Zu diesem Zweck plant Microsoft sogar, auf den eigenen Codec V1 zu verzichten, damit
der massenhaften Verbreitung von H264 (ähnlich wie von DivX) wenig im Wege steht - außer
eben Ogg und Theora.

Microsoft ist z.Z. DER bekannteste Browserhersteller, der HTML-5-Media nicht unterstützt
und das schon seit einigen Jahren in Microsoft-HTML-DOM eingebaute BGSOUND-Tag nicht
erweitert. Im Gegenteil: Microsoft hat HTML-5 bereits in Elemente so eingebaut, dass das
Objekt als leere Hülle vorhanden sind, aber das Ansprechen der Hülle zu Fehlern der
Webseite führt, fängt man die leere Hülle nicht ab. Mit anderen Worten: Microsoft
macht sich also auch noch lustig über HTML-5. Z.Z. ist der Internet Explorer 8 am Markt,
der HTML-5-Media fehlerhaft implementiert hat. Der Internet Explorer 9 wird  HTML-5
per H264 anbieten, wobei die Lizenzgebühr per Kauf von Windows abgedeckt wird.

Eine weitere Strecke zur Mediendarstellung per Webseite ist inzwischen das massenhaft
verbreitete Flash von Macromedia, das von Adobe geschluckt wurde und mit hochpreisigen
Produkten angepriesen wird - nur der Player nebst Codec sind kostenfrei beziehbar.
Die Flash-Verbreitung ist derart massiv, dass wie Google-Werbung Webseiten regelrecht
und aggresaiv zugemüllt sind: Es soll Verwertung stattfinden. Webseiten mit abgeschalteter
Flash-Fähigkeit sind eine Ansammlung von leeren Containern, so dass die maschinelle
Erstellung der Webseite (nebst Datenbankanbindung) geringe Kosten der Entwicklung
erlauben, um Verwertung am Markt sichtbar wird. Man sieht diesen Webseiten den
sterilen Flash-Stil oft an - optimierte Uniformität für Verwertung.

HTML-5 mit ogg und theora erlaubt es, kostengünstig, müllfrei und individuelle Webseiten
zu gestalten, ohne sich an Hersteller, Betriebssystem und Lizenzregelungen binden zu müssen.
Diese innovativen Möglichkeiten sind schlichtweg divergent zu o.g. Auffassungen bezüglich 
H264 in HTML5. Ob ein Verwertungsanbieter sich erbarmt, und HTML-5 unverändert zulässt,
ist stark zu bezweifeln - erst recht bei Microsoft und Adobe. Das zeigt auch die Entwicklung
bezüglich DivX (analog die von Blu-Ray als DVD-Nachfolger: Nur die AVCHD-Variante lässt
sich kostengünstig oder mit Freeware nachbilden, nicht jedoch das eigentliche Blu-Ray).


2.	HTML-5-Media auf Basis ogg und theora (www.xiph.org)
------------------------------------------------------------

Z.Z. sind nicht alle Webbrowser aktuell bezüglich HTML-5. Der Microsoft Internet Explorer 8
ist komplett veraltet: Er kennt kein HTML-5-Media, egal was Microsoft über HTML-5 lobend
von sich gibt. Microsoft hat mit HTML-5-Standard wenig am Hut und diesmal extem kontraproduktiv,
dafür bestens sich selbst ausgrenzend.

Browser wie Opera und Firefox kennen HTML-5, wobei Firefox traditionell etwas verspielter ist.

Wenn also HTML-5-Media im Browser implementiert ist, dann z.Z. auf Basis ogg und theora (www.xiph.org).
Die HTML-Elemente <VIDEO> und <AUDIO> werden vom Browser direkt verarbeitet, ohne
	dass ein Codec installiert sein muss. Der Browser bietet einen Player an.

Der Codec-Anbieter liefert zugleich Software mit, die z.B. in Windows den Microsoft Windows Media Player
zur ogg/theora Fähigkeit verhilft, nicht jedoch aber den Internet Explorer (nur Google arbeitet gern
für Microsoft und erweitert den Internet Explorer um Mediawiedergabefähigkeit). Der Codec erweitert auch
Freewareplayer wie Media Player Classic (http://mpc-hc.sourceforge.net/). Kommerzielle Software wird
eventuell nicht um die Abspielfähigkeit erweitert, wenn der Anbieter der kommerziellen Software das
unterbindet und nur seine Codecs offerieren will.
Unter Windows wird DirectShow benutzt.


Im Bereich Freeware gibt es wenige, aber brauchbare Tools zu Konvertierung von Medien nach
ogg bzw. theora, so dass man die Medienerstellung auch mit anderer Freeware vollziehen kann.
	z.B. OGV erstellen per FFCode (über ffmpeg2theora) z.B. aus AVI oder mpg.
   Damit gibt es eine Adobe-Flash-Konkurrenten mehr und das als HTML-Standard.

Audio in HTML-5

	wave also vermutlich nur unkomprimierte PCM
	definitiv kein flac (getestet) obwohl flac zu Ogg gehört
                  kein a3 (getestet)
	          kein mid (getestet)

Video
	nur Ogg Theora also OGV oder OGG oder OGA

			http://theora.org/downloads/
	    AVI

	keine komprimierten Formate wie mpg, wmv, mp4

Ogg Theora (ogv) können

	Opera
	Firefox
	Chrome
	Safari   kann nur H.264 codec (mp4)
	Internet Explorer kann nur Plugins wie Flash etc.


3. 	HTML-5-Video
--------------------

HTML-5-Audio und HTML-5-Video wurden spartanisch implementiert: Z.B. gibt es
	keine JavaScript-Schnittstelle .stop(), dafür gibt es aber .play()
	und .src (belegt man .src mit dem Dateinamen, dann werden Daten erst per
	.play() wiedergebeben; belegt man .src mit Leerkette also "", dann wird
	ein .stop() emuliert - Man sieht: Konseqent nicht objektorientiert
	implementiert).

Audio ähnelt dem Video.
	Video umfasst mehr Möglichkeiten und Eigenschaften von Audio.
	Video kann auch Audio abspielen (ohne Bild)
		Achtung: Desgin-Fehler: Ein leerer Anzeigbereich wird eventuell angezeigt,
						auch wenn Audio kein Bild haben kann.
	      bietet per rechter Maus, also per Kontextmenü, Möglichkeiten der Steuerung an.
		Achtung: Es gibt ev. Browser, die zeigen Kontextmenü in der Reaktion abweichend an.


HTML-Syntax- Beispiel für Video

<HTML>
<BODY>
<!-- Quelltext wurde mit Windows notepad.exe erstellt -->

<H3> OGV-Video im Browser laden und sofort starten</H3>
<VIDEO WIDTH="320"
       HEIGHT="290"
       SRC="demo.ogv"
       POSTER="demo_video.jpg"
       AUTOBUFFER
       AUTOPLAY
       CONTROLS
       LOOP
>
<!--		  Player-Control-Leiste-höhe ist 50 Pixel -->
<!--          Player-Control-Leiste-Breite ist 300 Pixel für Audio-Tag -->
<!--                                ist in Breite laut width für Video-Tag -->
 Der Microsoft Internet Explorer erkennt Video-Tag nicht, so ein Link auch nicht
 <BR>
 erkannt wird, aber dafür der Text angezeigt wird.
 <BR>
 Sollte der Codec zu ogg unter Windows installiert worde sein,
 <BR>
 kann der Windows Media Player auch ogg / theora wiedergeben.
</VIDEO>
     <!-- width optional,  Breite des Containers, kann entfallen da dann Videobreite benutzt wird -->
     <!--   wenn Dimension des Containers > Dimension des Videos, dann wird Video NICHT vergrössert -->
     <!--     Video wird immer unter Einhaltung der Proportionen gerendert, wobei auch gezoomt wird -->
     <!--       Ändert sich eine Dimension (z.B. Breite oder Höhe) dann wird die andere derart angepasst, -->
     <!--                dass die Proportion behalten wird. Damit muss gezoomt werden. -->
     <!--- 	Control-Leiste-Breite ist 300 Pixel für Audio-Tag, das nichts anzeigt und ohne Dimension ist -->
     <!---                        ist in Breite laut width für Video-Tag (nicht des Videos selbst) -->

     <!-- height optional, Höhe   des Containers, kann entfallen da dann Videohöhe benutzt wird -->
     <!--   wenn Dimension des Containers > Dimension des Videos, dann wird Video NICHT vergrössert -->
     <!--     Video wird immer unter Einhaltung der Proportionen gerendert, wobei auch gezoomt wird -->
     <!--       Ändert sich eine Dimension (z.B. Breite oder Höhe) dann wird die andere derart angepasst, -->
     <!--                dass die Proportion behalten wird. Damit muss gezoomt werden. -->
     <!--     Achtung: Player-Control-Leiste erscheinen auf dem Video, wenn die -->
     <!--                  Höhe des Players nicht um die Control-Höhe erweitert wird -->
     <!--		  Control-Leiste-höhe ist 50 Pixel -->
     <!--           Control-Leiste-Breite ist 300 Pixel für Audio-Tag, das nichts anzeigt und ohne Dimension ist -->
     <!--                                 ist in Breite laut width für Video-Tag (nicht des Videos selbst) -->

     <!-- src muss angegeben werden, Video oder Audio -->
     <!--     auch per source-Tag kodierbar -->
     <!--      z.B.  < video width ..... > < source src="demo.ogv" type="video/ogv" > ... < / video > -->

     <!-- poster optional, Bild das angezeigt wird wenn Mediadaten nicht vorhanden oder kein autoplay aktiv -->

     <!-- autobuffer optional, Laden der Mediadaten aktivieren gleichzeitig mit Laden der Webseite -->

     <!-- autoplay optional, abspielen der Mediadaten direkt nach dem Laden des Video-Objektes in der Webseite -->
     <!--        beachte poster -->

     <!-- controls optional, Playerliste unten anzeigen wobei parallel per Kontextmenü auch Player-Buttons verügbar sind -->
     <!--           Playerleiste kann auch per Kontextmenü ein- und ausgeblendet werden -->
     <!--    Controls erscheinen auf dem Video, wenn width und heigt in der Video-dimension bzw. -->
     <!--            width und heigt nicht angebeben wurden -->

     <!-- loop Wiederholung der Wiedergabe endlos -->
</BODY>
</HTML>


4.	AUDIO-Tag <AUDIO> in HTML und  Javascript
-------------------------------------------------

Microsoft Internet Explorer unterstützt kein HTML-5-Media, hat aber das Objekt im DOM
teilweise als leere Hülle implmentiert. Microsoft lässt zu, dass ein AUDIO-Tag als
Objekt ohne Eigenschaften erzeugbar ist (schlichtweg Verarschung der Script-Programmierer). 
Wer also Scriptfehler vermweiden will, muss tun:

  // ----- Objekt erzeugen
  var HTML5Objekt=document.createElement("AUDIO"); // bzw. "VIDEO"
   // oder  +++++ Zeiger auf das AUDIO-Objekt holen 
   // var HTML5Objekt=document.getElementById("test");
   //    mit "test" als ID von AUDIO-Tag bzw. VIDEO-Tag
   //                      das eindeutig sein muss

  if((HTML5Objekt!=null);
  {
   // ----- Prüfen ob Objekt komplett erzeugt wurde.
   //         Der Internet Explorer kann Objekt erzeugen aber nicht komplett.
   if(HTML5Objekt.src!=null)
   {if(HTML5Objekt.controls!=null)
    {if(HTML5Objekt.play!=null)
     {if(HTML5Objekt.pause!=null)
      {
	// ab hier steht fest, der Browser kennt HTML-5-Media formal
      }
     }
    }
   }
  }


4.1.	allgemeine HTML-Attribute
- - - - - - - - - - - - - - - - -

		•accesskey
		•class
		•contenteditable
		•contextmenu
		•dir	
		•draggable
		•id
		•item
		•hidden
		•lang
		•itemprop
		•spellcheck
		•style
		•subject
		•tabindex
		•title

4.2.	spezifische HTML-Attribute und/oder JavaScript-Schnitstelle
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Es ist üblich, dass Javascript-Schnittstellen nicht für alle HTML-Attribute verfügbar sind.
Es ist üblich, dass nicht alle HTML-Attribute eine Javascript-Schnittstelle haben.
Es ist üblich, dass Dinge aus Anwender- bzw. Programmierersicht bei der Implementierung
	eines HTML-Elementes vergessen wurden z.B. beim HTML-5-Media-Tag ein .stop().


media.xxx ist ein Platzhalter für die Referenz auf das HTML-5-Objekt


		with und heigth oder media.width und media.height
			Dimension des Containers, der die Mediadaten anzeigt
					Achtung: Es wird ein leerer Anzeigebereich autoamtisch erzeugt
			in CSS pixels
			>=0
			wenn 0 so wird Dimension laut Mediaangaben benutzt
			CSS-pixel: Pixel in Abhängigkeit der Bildschirmauslösung 8meist 96 dpi also dots per inch
     			Video wird immer unter Einhaltung der Proportionen gerendert, wobei auch gezoomt wird
     				Ändert sich eine Dimension (z.B. Breite oder Höhe) dann wird die andere derart angepasst,
			             dass die Proportion behalten wird. Damit muss gezoomt werden.
				Opera:  passt Videohöhe auf -breite an. 
					Ein leerer Anzeigenbereich ist quadratisch.
			Player-Control-Leiste erscheint fragmentarisch auf dem Video, wenn die
				Dimension des Anzeigebereiches zu klein ist.
			Control-Leiste-höhe ist 50 Pixel
		        Control-Leiste-Breite ist 300 Pixel für Audio-Tag, das nichts anzeigt und ohne Dimension ist
	                               ist in Breite laut width für Video-Tag (nicht des Videos selbst)

		src oder media.src

			Url einer  media resource (video, audio)
                        überschreibt den Wert des source-tags im Video-Tag
				z.B.  <audio width ..... > 
                                         <source src="demo.ogv" type="video/ogv"> <!-- anstelle SRC-Attribut -->
                                         ... 
                              </audio >

		poster oder media.poster
			URL einer Bilddatei, die als Platzhalter angezeigt wird, wenn keine Mediadaten vorhanden sind, oder
					die ERSt-Wiedergabe nach dem Laden des Video-Objektes nicht per autoplay aktiviert wurde.


 		autobuffer oder media.autopuffer
			boolean
			true so automatische Pufferung direkt beim Laden des HTML-Dokumentes, also
				nicht erst mit Aktivierung des Media durch User.

				Ogg-Dateien haben interne Bytes-Bereiche Seiten z.B. 4096 Bytes.
								Der Bereich ist die Puffergrösse.
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.

		autoplay oder media.autoplay
			boolean 
			true  so automatischen Start der Wiedergabe
			false so User muss per Controls die Wiedergabe starten (oder per .play())
			siehe poster

		controls oder media.controls
			boolean
			true so  Control-Leiste unten angezeigen
			wenn false so Controls nur per Kontextmenü rechte Maus erreichbar:
					Dort kann man Control-Leiste auch aus- und einblenden.
					Achtung: per oncontextmenu-Event abschaltbar.
			wenn true so so Controls auch per Kontextmenü rechte Maus auch erreichbar:
					Dort kann man control-Leiste auch aus- und einblenden
					Achtung: per oncontextmenu-Event abschaltbar.
     			Control-Leiste-Breite 	ist 300 Pixel für Audio-Tag, das nichts anzeigt und ohne Dimension ist
						ist in Breite laut width für Video-Tag (nicht des Videos selbst)

		loop oder media.loop
			boolean
			true so endlos Wiederholung aktiv


		media.currentSrc
			String der media resource, aber Leerkette wenn media.src unbelegt ist

		
		media.buffered
			true so Daten wurden gepuffert
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.

		media.loadeddata		
			boolean
			true so bereits genügend Daten für Wiedergabe verfügbar
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.

		media.played
			boolean
			true so Wiedergabe aktiv
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.
				
		media.paused
			boolean
			true so Wiedergabe pausiert

		media.ended
			boolean
			true so Wiedergabe ist beendet
			beachte: Loop verhindert das Ende der Wiedergabe

		media.defaultPlaybackRate [ = value ]
			Standard-Wiedergabe-Faktor: Beschleunigung der Wiedergabe
			value  lesen und schreiben
			Hinweis: User kann manuell per Gleitregler die Position verändern.
				 Man muss value nicht festlegen.

		media.playbackRate [ = value ]
			Wiedergabe-Faktor: Beschleunigung der Wiedergabe
			value  lesen und schreiben, Standard ist 1.0 float für normale Geschwindigkeit
			Hinweis: User kann manuell per Gleitregler die Position verändern.
				 Man muss value nicht festlegen.

		media.play()
			Wiedergabe an aktueller Position im Sond starten.
			Es gibt kein .stop()
				Stop der Wiedergabe geht nur per media.src="";
				Warnung: Solle z.B. eine ogg-Datei als Internet-Stream aktiviert werden,
					  dann fliessen solange Daten, bis media.src auf "" gesetzt
					  wurde. Auch während Pausieren fliessen Daten, nur dass man
					  diese nicht hört. Wer also keine Flat-Rate im
					  DSL-Internet-Zugang hat, MUSS unbedingt stoppen per
					  media.src beachten.
					 Das Fehlen der media.stop() ist eigentlich ein Designfehler
					  in HTML-5.
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.

		media.pause()
			Wiedergabe an aktueller Position im Sond pausieren.
			Es gibt kein .stop()
				Stop der Wiedergabe geht nur per media.src="";
				Warnung: Solle z.B. eine ogg-Datei als Internet-Stream aktiviert werden,
					  dann fliessen solange Daten, bis media.src auf "" gesetzt
					  wurde. Auch während Pausieren fliessen Daten, nur dass man
					  diese nicht hört. Wer also keine Flat-Rate im
					  DSL-Internet-Zugang hat, MUSS unbedingt stoppen per
					  media.src beachten.
					 Das Fehlen der media.stop() ist eigentlich ein Designfehler
					  in HTML-5.
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.

		media.currentTime [ = value ]
			Position der Wiedergabe festlegen
			value	 lesen und schreiben
				 Wert in Sekunden als float-Wert z.B. 1.0
			Es gibt kein .stop()
				Stop der Wiedergabe geht nur per media.src="";
				Warnung: Solle z.B. eine ogg-Datei als Internet-Stream aktiviert werden,
					  dann fliessen solange Daten, bis media.src auf "" gesetzt
					  wurde. Auch während Pausieren fliessen Daten, nur dass man
					  diese nicht hört. Wer also keine Flat-Rate im
					  DSL-Internet-Zugang hat, MUSS unbedingt stoppen per
					  media.src beachten.
					 Das Fehlen der media.stop() ist eigentlich ein Designfehler
					  in HTML-5.
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.

		media.timeupdate
			boolean
			true so Position verändert worden z.B. weil User den Positions-Gleitregler verändert hat.
			Es gibt kein .stop()
				Stop der Wiedergabe geht nur per media.src="";
				Warnung: Solle z.B. eine ogg-Datei als Internet-Stream aktiviert werden,
					  dann fliessen solange Daten, bis media.src auf "" gesetzt
					  wurde. Auch während Pausieren fliessen Daten, nur dass man
					  diese nicht hört. Wer also keine Flat-Rate im
					  DSL-Internet-Zugang hat, MUSS unbedingt stoppen per
					  media.src beachten.
					 Das Fehlen der media.stop() ist eigentlich ein Designfehler
					  in HTML-5.
			Solange nicht alle Daten gepuffert wurden, erscheint im Gleitregler der
				Position nicht der Knopf: Man kann also die Position nicht festlegen.
				Das macht auch Sinn, wenn man einen Internet-Stream gerade hört, der
					kein Ende haben kann.
				Das Puffern besorgt der Browser.
		
		media.volume [ = value ]
			Lautstärke
			vale	lesen und schreiben
				0.0 bis 1.0 als float-Wert
					0.0 ist stumm
					1.0 ist maximal laut
				Es wird INDEX_SIZE_ERR ausgelöst, wenn value ausserhalb des Wertebereiches
			Es gibt einen Gleitregler (senkrecht) zur Veränderung der Lautstärke.
			Achtung: Man prüfe, ob die Änderung der Laustärke auch die in der
					System-Laustärke (unter Windows im System-Lautstärke-Reglerbereich)
					verändert.

		media.muted [ = value ]
			Stummschalten ein bzw. aus
			value	boolean
				true so ein

		media.videoWith und media.videoHeigth
			liefert Dimension laut Mediadaten (falls Mediadaten geladen sind), also nicht die des Containers
			in CSS pixels
			>=0
			CSS-pixel: Pixel in Abhängigkeit der Bildschirmauslösung 8meist 96 dpi also dots per inch
			sind 0 wenn keine Mediadten vorhanden, also readyState auf HAVE_NOTHING ist
     			Video wird immer unter Einhaltung der Proportionen gerendert, wobei auch gezoomt wird
     				Ändert sich eine Dimension (z.B. Breite oder Höhe) dann wird die andere derart angepasst,
			             dass die Proportion behalten wird. Damit muss gezoomt werden.
				Opera:  passt Videohöhe auf -breite an. 
					Ein leerer Anzeigenbereich ist quadratisch.
			Player-Control-Leiste erscheint fragmentarisch auf dem Video, wenn die
				Dimension des Anzeigebereiches zu klein ist.
			Control-Leiste-höhe ist 50 Pixel
		        Control-Leiste-Breite ist 300 Pixel für Audio-Tag, das nichts anzeigt und ohne Dimension ist
	                               ist in Breite laut width für Video-Tag (nicht des Videos selbst)

		media.readyState
			Status der Phasen von HTML-5-Mediaobjekt (readystate ist im HTML-DOM weit verbreitet)
			Per readyState kann der Verlauf des Datenflusses nachverfolgt werden, wenn das notwendig sein sollte.
			Nachfolgen nur die englische Erklärung zu den Werten von .readyState, wobei Werte den aktuellen
				Status anzeigen. Der Wert ist entweder eine vordefinierter String oder numerisch.

		  HAVE_NOTHING 		(numeric value 0)
				No information regarding the media resource is available. 
				No data for the current playback position is available. 
				Media elements whose networkState attribute is NETWORK_EMPTY are always in the HAVE_NOTHING state.

  		  HAVE_METADATA 	(numeric value 1)
			Enough of the resource has been obtained that the duration of the resource is available. 
			In the case of a video element, the dimensions of the video are also available. 
			The API will no longer raise an exception when seeking. 
			No media data is available for the immediate current playback position.

		  HAVE_CURRENT_DATA 	(numeric value 2)
			Data for the immediate current playback position is available, but either not enough data is available 
				that the user agent could successfully advance the current playback position in the direction 
				of playback at all without immediately reverting to the HAVE_METADATA state, or there is 
				no more data to obtain in the direction of playback. 
			For example, in video this corresponds to the user agent having data from the current frame, 
				but not the next frame; and to when playback has ended.

		  HAVE_FUTURE_DATA 	(numeric value 3)
			Data for the immediate current playback position is available, as well as enough data for the user 
				agent to advance the current playback position in the direction of playback at least a little without 
				immediately reverting to the HAVE_METADATA state. 
			For example, in video this corresponds to the user agent having data for at least the current 
				frame and the next frame. 
			The user agent cannot be in this state if playback has ended, as the current playback position can never 
				advanced in this case.

		  HAVE_ENOUGH_DATA 	(numeric value 4)
			All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, the user agent
				estimates that data is being fetched at a rate where the current playback position, if it were 
				to advance at the rate given by the defaultPlaybackRate attribute, would not overtake the 
				available data before playback reaches the end of the media resource.
			When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user 
				agent must follow the steps given below:

					If the previous ready state was HAVE_NOTHING, and the new ready state is HAVE_METADATA
						Note: A loadedmetadata DOM event will be fired as part of the load() algorithm.

					If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
						If this is the first time this occurs for this media element since the load() 
						algorithm was last invoked, the user agent must queue a task to fire a simple event 
						called loadeddata at the element.

					If the new ready state is HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA, then the relevant 
						steps below must then be run also.

					If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready 
						state is HAVE_CURRENT_DATA or less
						Note: A waiting DOM event can be fired, depending on the current state of playback.

					If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state is HAVE_FUTURE_DATA
						The user agent must queue a task to fire a simple event called canplay.

					If the element is potentially playing, the user agent must queue a task to fire a simple event called playing.

					If the new ready state is HAVE_ENOUGH_DATA
						If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must queue a task 
						to fire a simple event called canplay, and, if the element is also potentially playing, 
						queue a task to fire a simple event called playing.

					If the autoplaying flag is true, and the paused attribute is true, and the media element has an 
						autoplay attribute specified, then the user agent may also set the paused attribute to false, 
						queue a task to fire a simple event called play, and queue a task to fire a simple event called playing.

					Note: User agents are not required to autoplay, and it is suggested that user agents honor user preferences on 
						the matter. Authors are urged to use the autoplay attribute rather than using script to force 
						the video to play, so as to allow the user to override the behavior if so desired.

					In any case, the user agent must finally queue a task to fire a simple event called canplaythrough.

					Note: It is possible for the ready state of a media element to jump between these states discontinuously. 
						For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA 
						without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

