Html5 Video Streaming

Dieser Leitfaden vermittelt Grundkenntnisse über das Video-Tag und diverse Integrationsmöglichkeiten in andere HTML5-Funktionen, wie z.B. .

"video. mp4"'video/mp4; codecs="avc1. 42E01E, mp4a.40.. 2"''' "movie. webm"'video/webm; codecs="vp8, worbis "' Dieses Schnipsel benutzt den Tag , der es Ihnen erlaubt, mehrere Dateiformate als Fallback-Typen aufzunehmen, falls der Benutzer einen von ihnen nicht unterstüzt. Man kann auch ein einziges Video-Format verwenden, bei dem die Schreibweise dem Image-Tag sehr ähnlich ist.

Das wird in absehbarer Zeit die am häufigsten verwendete Form der Darstellung sein, wenn alle Webbrowser ein einheitliches Bildformat haben. "Film. webm" Im Augenblick fokussieren wir uns auf den ersten Akt, der zurzeit häufiger auftritt. Vergewissern Sie sich, dass Ihr Webserver im Header des Content-Typs den richtigen MIME-Typ zur Verfügung stellt. Wenn nicht, können die Filme nicht richtig arbeiten, auch wenn sie noch auf einer örtlichen Version Ihrer Webseite waren.

Man stelle sich ein Video-Format als ZIP-Datei vor, das den kodierten Video- und Audio-Stream wiedergibt. Für das Internet sind die drei folgenden Dateiformate zu berücksichtigen: "webm", "mp4" und "ogv": Die Entwicklungsgeschwindigkeit der Videotags ist vielversprechend. Noch vor einem Jahr war Safari der einzigste Webbrowser, der das Video-Tag in seiner aktuellen Form bereitstellte.

Für den in Kürze erhältlichen Internet Explorer 9 wurde für das Projekt für den Einsatz in den Bereichen Firewall, Chrome und Oper die Unterstützung von". webm" als gängiges Video-Format beschlossen. ): Wenn Sie diesen Artikel schreiben (August 2010), ist dies das Schnipsel mit der sicherste Formatkombination, damit Sie sich darauf verlassen können, dass Ihr Video in allen gängigen Webbrowsern erscheint: "movie. webm"'video/webm; codecs="vp8, worbis "''. video. mp4"'video/mp4; codecs="avc1. 42E01E, mp4a.40 und mp3.4.

. "Die"' "Film. ogv" 'video/ogg; codecs="theora, vorbis"'' "Film. webm" . Anmerkung: Aufgrund eines iPad-Fehlers müssen Sie".mp4" als erste Möglichkeit für das Video eintragen. Nahezu alle Browserhersteller haben sich, wie bereits gesagt, bereit erklärt, ein einheitliches Video-Format zu verwenden. Innerhalb von weniger als einem Jahr wird dieser Kode wahrscheinlich im Internet benutzt werden: "movie. webm"'video/webm; codecs= "vp8, vorbis"'' "movie. mp4"'video/mp4; codecs="avc1. 42E01E, mp4a.40. 2"'' "movie. webm" .

Eines der grössten Probleme bei der Benutzung des MP4-Formats ist, dass sein Videocodec (H. 264) kein Open-Code ist. Für weitere Information über dieses Videoformat siehe dieses Video. Eine weitere Schwierigkeit beim MP4-Format ist, dass das Type-Attribut je nach dem für die Videokodierung benutzten Profile genauer sein muss als bei anderen Aufbereitungen.

Auch wenn es normalerweise "avc1. 42E01E, mp4a. 40. 2" ist, sollten Sie diese Profil-Liste noch einmal überprüfen, um sicher zu gehen. Auch wenn Microsoft die Unterstützung für das Video-Tag und andere HTML5-Elemente in der kommenden IE-Version, dem Internet Explorer 9, bekannt gegeben hat, erlebt dieser Webbrowser eine geringere Migrationsquote unter den Benutzern zu aktuelleren Version.

Was passiert mit den derzeitigen IE-Versionen, die das Video-Tag nicht unterstÃ?tzen? Abhängig vom Videoformat müssen Sie es möglicherweise neu kodieren, um es mit Adobe Acrobat Player kompatibel zu machen. Eine gute Neuigkeit ist, dass Adobe das Internetformat Webm in Adobe Player unterstützt.

Gegenüber dem Google Chrome Frame Plug-in ist der grösste Nachteil dieser Anwendung, dass Sie mit Flash Player als eingeschränkte Variante einer angepassten Benutzerschnittstelle oder erweiterter Funktionalität, die Sie für Ihr Video-Tag entwickelt haben, vertraut sein müssen. Einzelheiten zu dieser Methode entnehmen Sie bitte der Schnellanleitung zur Umsetzung von HTML5-Audio-Tags.

Wenn Sie Ihre vorhandenen Filme kodieren müssen, um die im vorhergehenden Kapitel genannten Formatierungen zu verwenden, macht es Miro Video Converter for Windows and Mac einfach, sie in das gewünschte Dateiformat zu konvertieren. In der Einleitung wird darauf hingewiesen, dass der größte Vorteil des Video-Tags der HTML5-Familie in der Einbindung in die anderen Schichten des Webentwicklungsstapels zu sehen ist.

Die nachfolgenden Beispiele geben Ihnen einen Einblick in die Anwendungsmöglichkeiten des Video-Tags. Alle gebräuchlichen HTML-Eigenschaften können nun im Videoplayer genutzt werden. Neue Eigenschaften wie Schleife für Repetitionen und automatisches Abspielen für die automatisierte Ausgabe, die im Video-Tag benutzt werden können und auch für das Audio-Tag üblich sind.

Das Poster-Attribut legt fest, welches Image beim Laden des Videos am Beginn des Videos dargestellt wird, und steuert, dass keine benutzerspezifischen Controls erzeugt werden, sondern dass der Webbrowser die Controls automatisiert wiedergibt. Ein Preload-Attribut erlaubt es, das Video im Hintergund herunterzuladen, sobald die Seiten aufgerufen werden, auch wenn die Abspielung noch nicht gestartet wurde.

"stern. png" "0" "film. webm"'video/webm; codecs="vp8, vorbis"' "film. ogv "'video/ogg; codecs="theora, vorbis"'' Die völlige Einbindung des Video-Tags als ursprüngliches Browser-Element behebt einige Fehler, die Sie in der Vergangenheit womöglich mit eingebauten Spielern von Drittherstellern hatten, wie z. B. überlappende Menünamen und iFrames im Abspielgerät oder ein seltsames Verhalten bei dynamischen Größenänderungen der anderen HTML-Elemente um das Video herum.

Weil das Video nicht als eingebetteter Fremdkörper betrachtet wird, gibt es eine Reihe weiterer Vorzüge, die sich auf das Benutzererlebnis auswirken. Anmerkung: Wenn Sie mehrere Sprachen für die XHTML-Syntax im Zusammenhang mit HTML5 verwenden, sollten die Eigenschaften in Ihrem Quelltext etwa so aussehen: "star. png" "autoplay" "loop" "controls" "0" "movie.

Das Video-Tag besitzt eine Vielzahl von Eigenschaften und Verfahren, mit denen Sie Ihr Video in JavaScript-Code präzise kontrollieren können. Sie können, wie jedes andere HTML-Element, allgemeine Events an das Video-Tag anfügen, z.B. Drag-Events, Maus-Events, Fokus-Events, etc. Allerdings hat das Video-Element eine Serie neuer Events, die erkennen und kontrollieren, wann das Video wiedergegeben wird.

Weil das Einladen einer Video-Ressource mit vielen Vorsichtsmaßnahmen verbunden sein kann, gibt es eine Vielzahl von Ereignissen, mit denen der Ladevorgang sowohl auf Netzebene ("loadstart", "progress", "suspend", "abort", "error", "empty", "stalled") als auch auf Pufferebene (loadedmetadata, "loadeddata", "waiting", "playing", "canplay", "canplaythrough") präzise kontrolliert werden kann. Im einfachsten Fall können Sie das Ereignis "canplay" als Einführung in Ihre Arbeit mit dem Video anfügen.

In diesem Beispiel werden wir einige Steuerelemente benutzen, um zwei Video simultan zu kontrollieren und auch den Precoil-Effekt mit dem Attribut playbackRate zu ahmen. Benutzen Sie den Regler, um die gewünschte Videolautstärke einzustellen. Das Video-Tag kann, wie Sie vielleicht schon erraten haben, mit weiteren CSS-Formaten wie Rändern, Opazität usw. aufbereitet werden.

Wenn Sie den Cursor über das folgende Video bewegen, können Sie einige davon in voller Action miterleben. Canvas ist ein weiteres HTML5-Element, das eine Vielzahl von Optionen in Verbindung mit dem Video-Tag bereitstellt. Das erste ist die drawImage-Methode, mit der Sie ein Bild aus drei verschiedenen Bildquellen einlesen können: ein Bild-, ein anderes Leinwand- und ein -Element!

Das heißt, dass bei jeder Durchführung dieser Methoden der jeweils aktuell stehendes Einzelbild im Video in die Leinwand übernommen und wiedergegeben wird. Als zweite Funktionalität des Tags wird die Methodik toDataURL verwendet, mit der Sie den Content des Elements toDataURL in ein Bildformat ausgeben. Im darauffolgenden Video können Sie durch Anklicken der Wiedergabetaste feststellen, wie alle eineinhalb Minuten ein Foto aus dem Video aufgenommen wird.

Die Leinwand, die wir zum Importieren oder Exportieren verwenden, ist ausgeblendet. Der folgende Quelltext zeigt, wie wir alle anderthalb Stunden ein Zeitintervall mit der Methode "drawImage" erzeugen, bei der das Video-Element als Quelltext benutzt wird. Falls Sie die Frequenz des Imports aus dem Video und des Renderings vergrößern können, können Sie die Bildrate des gleichen Videos im Canvas-Element nachbilden.

So können Sie eine Reihe von ausgefallenen Umwandlungen im Canvas-Element durchführen, als ob Sie es im Video machen würden. Links können Sie die Wiedergabe des Originalvideos mitverfolgen. Mittendrin ist ein Leinwandelement, mit dem wir die Aufnahmen alle 33ms einlesen. Rechts befindet sich ein zweites Leinwandelement, das alle Umwandlungen durchläuft und zugleich die Aufnahmen aus dem ersten Leinwandelement einliest.

Einziger ausschlaggebender Faktor für die Nutzung von zwei Leinwandelementen ist, dass die Performance wesentlich besser ist als bei einem einzigen Leinwandelement, das simultan ein Bild liest und umwandelt. Zum Beispiel können Sie mit WebGL die Rahmen eines Video einlesen und in einem rotierenden 3D-Würfel darstellen. Bei der Erstellung dieses Beitrags (August 2010) unterstützt MozillaSVG.

Dies ermöglicht es Ihnen, das Videoelement mit Hilfe von CSS und CSS anzusteuern. In diesem Beispiel benutzen wir Java-Script und Canvas, so dass das Video auch in Browser gespielt werden kann, die noch keine Inline-SVG unterstützen: 'image' "1. 1" "http://www.w3. org/2000/svg" "myblur" "1" : ); : : ;