Freigeben über

Dieser Artikel wurde maschinell übersetzt.

Erstellen von HTML5-Anwendungen

Praktische browserunabhängige HTML5-Technologie für das Abspielen von Audio- und Video-Dateien

John Dyer

Wenn die HTML5-audio- und video-Tags eingeführt wurden, Codec und Browser-Inkompatibilitäten machte sie schwer zu handhaben und unrealistisch, auf großen Websites bereitstellen.Die Tags waren groß für Unternehmen experimentellen Code schreiben oder Cross-Browser-Medien-Entwicklung zu tun, aber die HTML5 Media API wurde für den allgemeinen Gebrauch zu unzuverlässig.

Heute liegen die Dinge anders.Browser und JavaScript-Bibliotheken haben gereift, bis zu dem Punkt, wo Sie können – und sollte — verwenden HTML5 Medien als Standardeinstellung für alle Projekte, die audio und video-Inhalte angezeigt werden.Auch Nachrüstung vorhandener Flash und Silverlight video-Content für HTML5 Wiedergabe relativ einfach geworden ist.In diesem Artikel werde ich entdecken die Vorteile der Verwendung von HTML5 für die Medienwiedergabe, zeigen einige Beispiel-Code, einige wichtige Probleme, dass Entwickler Gesicht und Lösungen für diese Probleme präsentieren.

Vorteile der HTML5-Media

Der Vorteil der Verwendung von HTML5 für die Medien ist, dass Sie Ihre HTML, CSS und JavaScript-Fähigkeiten nutzen können, anstatt lernen Flash oder Silverlight.Wenn Sie Schaltflächen in HTML erstellen und mit JavaScript steuern können, wissen Sie bereits alle, die Sie Bedarf zu HTML5 Medien entwickeln.HTML5 Media verfügt über integrierte Unterstützung für Beschriftungen und Untertitel mit dem neuen Track-Element und Vorschläge für weitere Funktionen — z. B. Byte Direktzugriff für video Bearbeitung — werden bereits geprüft.

Darüber hinaus führt besser als Medien gespielt durch Plugins wie Flash oder Silverlight, was längere Lebensdauer der Batterie und glatter Wiedergabe Medien, das HTML5-Video und Audio verwendet.Darüber hinaus unterstützen mobile Geräte mit Windows Phone 7.5, Apple iOS und Android (sowie den U-Bahn-Stil-Browser in Windows 8) Medienwiedergabe nur über HTML5 video- und audio.Einige Android-Geräte gehören Flash, aber Adobe hat vor kurzem das eingestellt mobile Flash bemüht, was bedeutet, dass HTML5 die einzige Möglichkeit zum Abspielen von Medien auf mobilen Geräten in der Zukunft sein wird.

Einfache HTML5 Wiedergabe und Steuerelemente

In den Tagen der Verwendung von Flash oder Silverlight für video-Wiedergabe hätte das einfachste mögliche Markup für eine Video (in diesem Fall video.mp4) Anzeige etwas wie folgt ausgesehen:

<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
  <param name="src" value="player.swf?file=video.mp4">
  <embed src="player.swf?file=video.mp4" width="640"
    height="360"></embed>
</object>

Vergleichen Sie die geschachtelten Objekts, Param und embed-Tags mit diesem HTML5 video-Tag verwendet, um das gleiche h. 264-codierte Video wiederzugeben:

<video src="video.mp4" controls></video>

Es ist viel einfacher — einfach nur HTML, die sehr wenig Erklärung benötigt. Wenn genug eines Videos zu nativen Höhe und Breite bestimmen der Browser heruntergeladen wurde, ändert es das Video entsprechend. Aber, genau wie bei Img-Tags, ist es immer am besten die Attribute Height und Width angegeben, so dass die Seite nicht umfließen muss. Das Style-Attribut können Sie auch px oder % Werte für Breite und Höhe angeben (Ich verwende beide in die folgenden Beispiele).

Die ein Attribut hinzugefügte ist Steuerelemente. Dies weist den Browser an eigene Kontrollstreifen integrierte Wiedergabe, Anzeige umfasst in der Regel ein Spiel/Pause Toggle, eine Statusanzeige und Lautstärkeregler. Controls ist ein boolesches Attribut, das heißt, es muss keinen Wert zugewiesen haben. Für eine mehr XHTML-ähnlichen Syntax können Sie Steuerelemente schreiben = "Steuerelemente", aber der Browser immer hält Steuerelemente zu false, wenn es nicht vorhanden und wahr ist, wenn es vorhanden ist oder ein Wert zugewiesen.

HTML5 Media Attribute und untergeordneten Source Tags

Die Audio- und video-Elemente stellen mehrere neue Attribute, die bestimmen, wie der Browser die Medieninhalte für den Endbenutzer vorlegen wird.

  • Src gibt an, für die Wiedergabe eine Mediendatei (mehrere Quellen mit verschiedenen Codecs, siehe die Erläuterungen weiter unten).
  • Poster ist eine URL zu einem Bild, das angezeigt wird, bevor ein Benutzer Play (nur Video) drückt.
  • Vorspannung bestimmt, wie und wann wird der Browser laden die Mediendatei mit drei mögliche Werte: None bedeutet, dass das Video nicht heruntergeladen werden, bis der Benutzer die Wiedergabe startet; Metadaten wird der Browser angewiesen, gerade genug Daten, um die Höhe, Breite und Dauer der Medien ermitteln herunterladen; Auto kann den Browser entscheiden, wie viel des Videos zum downloaden, bevor der Benutzer die Wiedergabe startet.
  • AutoPlay ist ein Boolean-Attribut verwendet, um eine Video zu starten, sobald die Seite geladen wird (mobile Geräte oft ignorieren dies um Bandbreite zu sparen).
  • Schleife ein boolesches Attribut, das bewirkt, eine Video dass zu beginnen, wenn das Ende erreicht ist.
  • Ton ist ein boolesches Attribut, das angibt, ob das Video gedämpften gestartet werden soll.
  • Steuerelemente ist ein boolesches Attribut, das angibt, ob der Browser über eigene Steuerelemente angezeigt werden sollen.
  • Breite und Höhe sagen, eine Video zum Anzeigen in einer bestimmten Größe (Video nur; kann kein Prozentsatz sein).

Zeitgesteuerte Textspuren

Browser sind auch, dass Anfang des Track-Elements implementieren die Untertitel bereitstellt, Beschriftungen, Übersetzungen und Kommentare zu Videos geschlossen. Hier ist ein video-Element mit einem untergeordneten-Element Track:

<video id="video1" width="640" height="360" preload="none" controls>
  <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">
</video>

In diesem Beispiel habe ich vier von fünf möglichen Attribute das Track-Element:

  • Src ist ein Link auf eine Web Video Timed Text (WebVTT) Datei oder eine Timed Text Markup Language (TTML)-Datei.
  • Srclang ist die Sprache der TTML Datei (z. B. En, es oder Ar).
  • Art gibt den Typ von Textinhalt: Untertitel, Überschriften, Beschreibungen, Kapitel oder Metadaten.
  • Bezeichnung hält den Text an einen Benutzer auswählen eines Titels angezeigt.
  • Standard ist ein boolesches Attribut, das das Start-Track-Element bestimmt.

WebVTT ist eine einfache Text-basierten Format, das beginnt mit einer einzeiligen Erklärung (WEBVTT-Datei) und dann Listen start und Endzeiten getrennt von den--> Zeichen, gefolgt von den Text zwischen den beiden Zeitangaben angezeigt. Hier ist eine einfache WebVTT-Datei, die zwei Zeilen Text in zwei verschiedenen Zeitintervallen angezeigt werden:

WEBVTT FILE

00:00:02.5 --> 00:00:05.1
This is the first line of text to display.
00:00:09.1 --> 00:00:12.7
This line will appear later in the video.

Dieses Schreibens, nur von Internet Explorer 10 Platform Preview und Chrom 19 unterstützt das Track-Element, aber andere Browser werden voraussichtlich bald tun. Einige JavaScript-Bibliotheken später besprochen Hinzufügen von Unterstützung für das Track-Element zu Browsern, die noch nicht implementiert haben, aber es gibt auch eine Standalone-Track-Bibliothek namens captionator.js (captionatorjs.com), dass analysiert Markierungen, verfolgen liest WebVTT und TTML (sowie SRT und YouTube SBV) Dateien und bietet eine Benutzeroberfläche für Browser, die native Unterstützung noch nicht.

Skripting HTML5-Media

Früher habe ich das Attribut Steuerelemente mitteilen den Browser an die systemeigene Steuerelemente über die Video- oder audio-Tags anzuzeigen. Das Problem dabei ist, dass jeder Browser einen unterschiedlichen Satz von Steuerelementen, die hat an Ihrer Web Site Design angepasst werden. Um ein konsistentes Verhalten zu erstellen, können Sie den Browser Steuerelemente entfernen und fügen Sie benutzerdefinierte Schaltflächen auf der Seite, die Sie mit JavaScript steuern. Sie können auch Ereignis-Listener zu verfolgen den Zustand der Video- oder audio-Wiedergabe hinzufügen. Ich habe im folgenden Beispiel entfernt das Attribut Steuerelemente und Markup unter dem Video, dienen als eine grundlegende Steuerung Bar hinzugefügt:

<video id="video1" style="width:640px; height:360px" src="video.mp4"> </video> 
<div>
  <input type="button" id="video1-play" value="Play" />
  <input type="button" id="video1-mute" value="Mute" />
  <span id="video1-current">00:00</span>
  <span id="video1-duration">00:00</span>
</div>

Das einfache JavaScript in Abbildung 1 wird die Kontrolle Videowiedergabe und zeigen die aktuelle Zeit in dem Video, und erstellt den komplette arbeiten Spieler in den Abbildung 2(in Internet Explorer 9 gerendert). (Beachten Sie, dass in HTML5, Typ = "Text/Javascript" Attribut ist nicht auf das Script-Tag erforderlich.)

Abbildung 1 Kontrolle der Video-Wiedergabe

<script>
// Wrap the code in a function to protect the namespace
(function() {
// Find the DOM objects
var  video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
duration = document.getElementById("video1-duration");

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
    video.play();
    playBtn.value = "Pause";
  } else {
    video.pause();
    playBtn.value = "Play";
  }
}, false);

// Toggle the mute state
muteBtn.addEventListener("click", function() {
  if (video.muted) {
    video.muted = false;
    muteBtn.value = "Mute";
  } else {
    video.muted = true;
    muteBtn.value = "Unmute";
  }
}, false);

// Show the duration when it becomes available
video.addEventListener("loadedmetadata", function() {
  duration.innerHTML = formatTime(video.duration);
}, false);

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(video.currentTime);
}, false);

function formatTime(time) {
  var 
    minutes = Math.floor(time / 60) % 60,
    seconds = Math.floor(time % 60);

  return   (minutes < 10 ? '
0' + minutes : minutes) + ':' +
           (seconds < 10 ? '
0' + seconds : seconds);
}

})();

A Working Video Player That Shows the Time
Abbildung 2 Videoplayer, der die Zeit zeigt Arbeiten

Der Code in Abbildung 1 stellt das Spiel und anhalten Methoden, die Ereignisse Timeupdate und Loadedmetadata und die Eigenschaften angehalten, beendeten, CurrentTime und Dauer. Die vollständigen HTML5 Medien API (w3.org/TR/html5/video.html) beinhaltet viel mehr, die verwendet werden kann, um einen vollwertigen MediaPlayer zu erstellen. Neben der HTML5 tag Medien zuvor aufgeführten Attribute, HTML5 Medienobjekte haben andere Eigenschaften, die nur über JavaScript:

  • CurrentSrc beschreibt die Mediendatei der Browser spielt derzeit beim Quelle-Tags verwendet werden.
  • VideoHeight und VideoWidth die nativen Dimensionen des Videos anzuzeigen.
  • Volume gibt einen Wert zwischen 0 und 1 an der Band. (Mobile Geräte ignorieren dies zugunsten der Hardware-Lautstärkeregler).
  • CurrentTime gibt die aktuelle Wiedergabeposition in Sekunden.
  • Dauer ist die Gesamtzeit in Sekunden der Mediendatei.
  • gepufferte ist ein Array, der angibt, welche Teile der Mediendatei heruntergeladen wurden.
  • PlaybackRate ist die Geschwindigkeit, mit der das Video wiedergegeben (Standard: 1). Ändern Sie diese Anzahl gehen schneller (1.5) oder langsamer (0.5).
  • endete gibt an, ob das Video das Ende erreicht hat.
  • angehalten ist immer true beim Start und dann falsch, sobald das Video zu spielen begonnen hat.
  • Suche nach zeigt der Browser versucht, downloaden und an eine neue Position verschieben.

HTML5 Medienobjekte gehören auch die folgenden Methoden für die Skripterstellung:

  • spielen versucht zu laden und Abspielen des Videos.
  • Anhalten hält aktuell wiedergegebenen Videos.
  • canPlayType(type) erkennt welche Codecs ein Browser unterstützt. Wenn Sie einen Typ wie Video/mp4 senden, Browser beantworten mit wahrscheinlich, vielleicht, keine oder eine leere Zeichenfolge.
  • Laden wird aufgerufen, um das neue Video zu laden, wenn Sie das Src-Attribut ändern.

Die HTML5-Spezifikation Medien bietet 21 Veranstaltungen; Hier sind einige der häufigsten sind:

  • Loadedmetadata wird ausgelöst, wenn die Dauer und die Abmessungen bekannt sind.
  • Loadeddata wird ausgelöst, wenn der Browser an der aktuellen Position spielen kann.
  • spielen das Video startet, wenn das Video nicht mehr angehalten oder beendet wird.
  • spielen wird ausgelöst, wenn die Wiedergabe gestartet wurde, nachdem anhalten, Pufferung oder suchen
  • Anhalten wird das Video angehalten.
  • endete wird ausgelöst, wenn das Ende des Videos erreicht wird.
  • Fortschritt gibt mehr der Mediendatei heruntergeladen wurde.
  • Suche nach gilt, wenn der Browser gestartet hat suchen.
  • Seeked ist false, wenn der Browser sucht abgeschlossen hat.
  • Timeupdate ausgelöst wird, wie die Medien-Ressource spielt.
  • Volumechange wird ausgelöst, wenn Sie stummgeschaltet oder Volume-Eigenschaften geändert haben.

Diese Eigenschaften, Methoden und Ereignisse sind leistungsstarke Tools für die Präsentation von Benutzern mit einer rich-Media-Erfahrung, alle angetrieben von HTML, CSS und JavaScript. Im einfachen Beispiel in Abbildung 1, ich zuerst erstellen Sie Variablen für alle Elemente auf der Seite:

// Find the DOM objects
var video = document.getElementById("video1"),
  playBtn = document.getElementById("video1-play"),
  muteBtn = document.getElementById("video1-mute"),
  current = document.getElementById("video1-current"),
  duration = document.getElementById("video1-duration");

Dann füge ich ein Click-Ereignis, um meine Tasten Medienwiedergabe zu steuern. Hier ich umschalte das Spiel anhalten Zustand des Videos und ändern Sie die Beschriftung für die Schaltfläche:

// Toggle the play/pause state
playBtn.addEventListener("click", function() {
  if (video.paused || video.ended) {
      video.play();
      playBtn.value = "Pause";
  } else {
      video.pause();
      playBtn.value = "Play";
  }
}, false);

Schließlich hinzufügen ich Ereignisse, um das Medienobjekt um seinen aktuellen Zustand zu verfolgen. Hier höre ich für das Timeupdate-Ereignis und das Update der Steuerleiste auf die aktuelle Zeit an der Abspielposition, Formatierung der Sekunden zu einem Stil Minuten: Sekunden:

// Update the current time
video.addEventListener("timeupdate", function() {
  current.innerHTML = formatTime(media.currentTime);
}, false);

Probleme mit HTML5 Media

Leider ist immer HTML5 Medien auf allen Browsern und Geräten arbeiten nicht ganz so einfach wie in meinem Beispiel. Ich habe bereits erwähnt, dass nicht alle Browser das Track-Element unterstützen, und ich werde nun drei zusätzliche Probleme, die auftreten, wenn die audio und video-Tags mit Adresse zusammen mit Lösungen zu überwinden. Am Ende des Artikels werde ich einige JavaScript-Bibliotheken vorstellen, die all diese Lösungen in einzelnen, leicht einsetzbaren Pakete verpacken.

HTML5 Audio und Video-Codec unterstützen die erste Ausgabe Sie stehen bei der Entwicklung mit HTML5 Media ist die uneinheitliche Unterstützung für Video- und audio-Codecs. Meine Beispiele funktionieren in Internet Explorer 9 und höher, Chrome und Safari, aber sie funktioniert nicht in Firefox oder Opera weil obwohl die Browser das HTML5 video Tag unterstützen, können sie den h. 264-Codec nicht unterstützen. Aufgrund von urheberrechtlichen Bedenken, Browser-Anbieter wurden in zwei Codec Lager aufgeteilt, und das bringt uns zu der bekannten HTML5 Media-Diagramm in Abbildung 3, zeigen, welche Codecs mit welchen Browsern funktionieren.

Abbildung 3-Codec-Unterstützung in verschiedenen Browsern

Grafikkarte IE8 IE9 + Chrom Safari Mobil Firefox Oper
MP4 (h) nein ja ja ja ja nein nein
WebM (VP8/Vorbis) nein Installieren ja nein nein ja ja

 

Internet Explorer 9++, Safari, Chrome und mobile Geräte (iPhone, iPad, Android 2.1 + und Windows Phone 7,5 +) unterstützen den h. 264 video-Codec, der in der Regel in einen MP4-Container befindet. Firefox und Opera, unterstützen im Gegensatz dazu den Videocodec VP8, dem WebM-Container platziert wird. Chrom auch WebM unterstützt und hat sich verpflichtet, h. 264-Unterstützung zu einem bestimmten Zeitpunkt zu entfernen. Internet Explorer 9++ können WebM rendern, wenn der Codec vom Benutzer installiert wurde. Schließlich, Firefox, Opera und Chrome unterstützen auch den Theora-Codec in einem Ogg-Container platziert, aber dies hat wurden weitgehend abgeschafft zugunsten von WebM (es sei denn, Sie Firefox 3.x Unterstützung müssen), so dass ich es das Diagramm und Beispiele für Einfachheit ausgelassen habe.

Für Audio, die Browser-Hersteller erneut teilen sich in zwei Lager, mit der ersten Gruppe (Internet Explorer 9, Chrome und Safari) unterstützen die bekannten MP3-Format und die zweite Gruppe (Firefox und Opera) unterstützen den Vorbis-Codec in einem Ogg-Container. Viele Browser können auch die WAV-Datei-Format wiedergeben. siehe Abbildung 4.

Abbildung 4-Audio-Unterstützung in verschiedenen Browsern

Audio IE8 IE9 + Chrom Safari Mobil Firefox Oper
MP3 nein ja ja ja ja nein nein
Ogg Theora nein Installieren ja nein nein ja ja
WAV nein nein Vielleicht ja ja ja ja

 

Um diese Unterschiede zu begegnen, unterstützen die Video- und audio-Tags mehrere untergeordnete Quelle Tags, ermöglicht Browsern eine Mediendatei auswählen, die sie spielen können. Jedes Quellelement verfügt über zwei Attribute:

  • Src gibt einen URL für eine Mediendatei.
  • Typ gibt den Mimetype, und optional die spezifischen Codec des Videos.

Um h. 264 und video-Codecs On2 Technologies bieten zu können, verwenden Sie das folgende Markup:

<video id="video1" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Beachten Sie, dass frühere Builds von iOS und Android die MP4-Datei zuerst aufgelistet werden müssen.

Dieses Markup wird auf allen modernen Browsern funktionieren. Der JavaScript-Code wird steuern, welcher der Browser entscheidet es abspielen kann. Für Audio-und aussieht das Markup wie folgt:

<audio id="audio1">
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.oga" type="audio/oga">
</audio>

Wenn Sie Audio-oder Videoinhalten auf Ihrem eigenen Server hosten, müssen Sie den richtigen MIME-Typ für jede Mediendatei oder viele HTML5-fähige Browser (z. B. Internet Explorer und Firefox) spielen die Medien nicht. Gehen Sie zum Hinzufügen von MIME-Typen in IIS 7 Doppelklicken Sie in der Ansicht Features auf MIME-Typen, klicken Sie im Aktionsbereich hinzufügen, fügen Sie die Erweiterung (mp4) und MIME-Typ (Video/mp4) und drücken Sie dann OK. Dann tun Sie dasselbe für die anderen Typen (Webm und Video/Webm) Sie verwenden möchten.

Ältere Browser unterstützen einschließlich zwei Mediendateien (z. B. MP4 und WebM Video) macht HTML5 Medienarbeit in allen modernen Browsern. Aber wenn ältere Browser (z.B. Internet Explorer 8) das video Tag begegnen, können sie das Video nicht anzeigen. Sie werden jedoch den HTML-Code zwischen die <video> Öffnung setzen gerendert. und schließen </video> Markierungen. Das folgende Beispiel enthält eine Nachricht fordert Benutzer um einen neueren Browser zu erhalten:

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Please update your browser</p>
</video>

Damit um Besucher mit Browsern nicht-HTML5-bereit zum Abspielen zu können, bieten Sie eine Alternative mit Flash eingebettet, die die gleichen MP4 Sie für Internet Explorer 9, Safari und Chrome liefern, spielt, wie in Abbildung 5.

Abbildung 5-Video-Wiedergabe mit Flash

 

<video id="video1" width="640" height="360" >
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <object width="640" height="360" classid="clsid:
    d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=
      "http://fpdownload.macromedia.com/pub/
      shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
        <param name="SRC" value="player.swf?file=video.mp4">
        <embed src="player.swf?file=video.mp4" width="640"
          height="360"></embed> 
        <p>Please update your browser or install Flash</p>
  </object>
</video>

Dieses Markup stellt allen Browsern mit irgendwie zurück video zu spielen.Browser weder HTML5-noch Flash sehen eine Meldung ihrerseits zu aktualisieren.Weitere Informationen darüber, wie und warum diese geschachtelten Markup funktioniert, finden Sie unter Kroc Camen "Video for Everybody" (camendesign.com/code/video_for_everybody).

Dieser Ansatz hat jedoch einige Nachteile.Einerseits gibt es eine Menge von Markup zu pflegen.Zweitens haben Sie zum Verschlüsseln und Speichern von mindestens zwei Media-Dateien.Und drittens alle HTML/JavaScript-Steuerelemente, die Sie der Seite hinzufügen funktioniert nicht mit den eingebetteten Flash-Player.Später werde ich einige JavaScript-Bibliotheken vorschlagen, die Sie überwinden diese Probleme, aber erste, lassen Sie uns Adresse eine abschließende Frage helfen können.

Vollbildmodus-Unterstützung sowohl Flash als auch Silverlight enthalten einen Vollbild-Modus, mit dem Benutzer Watch video und andere Inhalte auf dem gesamten Bildschirm.Sie können dieses Feature implementieren, indem Sie eine einfache Schaltfläche erstellen und binden es an eine ActionScript (für Flash) oder c# (für Silverlight) Vollbild-Befehl.

Heutige Browser haben einen ähnlichen Vollbild-Modus, den Benutzer mit einer Tastatur oder eines Menübefehls (oft F11 oder STRG + F) auslösen können.Aber bis vor kurzem keine entsprechenden JavaScript-API erlaubt Entwicklern, Vollbild-Modus über eine Schaltfläche auf einer Seite zu initiieren.Dies bedeutete, dass HTML5 Video kann nur in eine "vollständige Fenster", das im Browserfenster, aber nicht den gesamten Bildschirm gefüllt angezeigt werden.

Ende 2011 Safari, Chrome und Firefox fügte Unterstützung für W3C vorgeschlagen FullScreen-API, die Funktionen ähnlich denen in Flash und Silverlight bietet.Das Opera-Team arbeitet derzeit an der Umsetzung, aber das Internet Explorer-Team hat, dieses Schreibens, noch nicht entschieden, ob sie die API umsetzt.Der Metro-Stil-Browser in Windows 8 werden Vollbild standardmäßig, aber desktop Internet Explorer-Benutzer müssen manuell mithilfe von Menüoptionen oder die Taste F11 Vollbildmodus eingeben.

Um Vollbild-Modus im Browser eingeben, die sie unterstützen, rufen Sie die RequestFullscreen-Methode für das Element werden Vollbild angezeigt.Der Befehl zum Vollbildmodus beenden wird auf das Document-Objekt aufgerufen: Document.exitFullscreen-Methode.Der W3C-Vorschlag ist immer noch ein Work In Progress, also ich nicht mehr ins Detail hier gehe, aber ich der Staat der API, auf meinem Blog nachverfolgen bin: Bit.ly/zlgxUA.

HTML5 Video- und Audio-JavaScript-Bibliotheken

Eine Anzahl von Entwicklern erstellt JavaScript-Bibliotheken, die HTML5 video und audio leichter Integration aller relevanten Code in einem einzigen Paket.Einige der besten open-Source-Bibliotheken sind MediaElement.js, jPlayer, VideoJS, Projekktor, Playr und LeanBack.Sie finden eine vollständige Liste mit Featurevergleich auf praegnanz.de/html5video.

Alles, was Sie tun müssen, ist einen Video- oder audio-Tag bieten sowie der Bibliothek wird automatisch erstellen eine Reihe von benutzerdefinierten Steuerelementen, und legen Sie einen Flash-Player für Browser, die HTML5-Media-Unterstützung nicht.Das einzige Problem ist, dass der Flash Player, die viele Bibliotheken einfügen immer sehen nicht oder wie der HTML5-Player funktionieren.Dies bedeutet, dass alle HTML5-Ereignisse, die Sie hinzufügen nicht mit den Flash-Player funktioniert und alle benutzerdefinierten CSS Sie verwenden nicht sichtbar, entweder.

In meiner eigenen Arbeit, ich wurde gebeten, ein HTML5-Videoplayer mit synchronisierten Folien und Abschriften zu erstellen (siehe http://online.dts.edu/player für eine Demo).Wir hatten eine vorhandene Bibliothek von mehr als 3.000 h. 264-video-Dateien und es galt als undurchführbar zu transcodieren sie WebM für Firefox und Opera.Wir mussten auch ältere Browser wie Internet Explorer 8 zu unterstützen, aber ein separater Blitz Ersatz würde nicht funktionieren, denn es würde nicht auf Ereignisse für die Folien und Abschriften zu reagieren.

Um diese Schwierigkeiten zu überwinden, ich habe ein Spieler erwähnt früher als MediaElement.js (mediaelementjs.com).Es ist ein open-Source (MIT/GLPv2)-JavaScript-Bibliothek, die spezielle Flash- und Silverlight-Player enthält, die die API von HTML5 zu imitieren.Anstatt einen völlig separaten Flash Player MediaElement.js nutzt Flash nur Videos Rendern und umschließt dann das Video mit einem JavaScript-Objekt, das aussieht wie das HTML5-API.Dadurch werden effektiv alle Browser aktualisiert, damit sie das video-Tag und zusätzliche Codecs, die nicht nativ unterstützt nutzen können.Um der Spieler mit einer einzigen h. 264-Datei mit jQuery zu starten, benötigen Sie nur den folgenden Code:

<video id="video1" width="640" height="360" src="video.mp4" controls></video>
<script>
jQuery(document).ready(function() {
  $("video1").mediaelementplayer();
});
</script>

Für Browser, die nicht unterstützen, das video-Tag (wie Internet Explorer 8) oder diejenigen, die h. 264 (Firefox und Opera) nicht unterstützen, wird die MediaElement.js legen Sie die Flash (oder Silverlight, je nachdem, was der Benutzer installiert hat) Shim "dieser Browser aktualisieren", so dass sie gewinnen die HTML5 Medieneigenschaften und Ereignisse, die ich behandelt habe.

Für audio-Unterstützung können Sie eine einzelne MP3-Datei:

<audio id="audio1" src="audio.mp3" controls></audio>

Alternativ können Sie eine einzelne Ogg/Vorbis-Datei einfügen:

<audio id="audio1" src="audio.oga" controls></audio>

Wieder für Browser, die das audio-Tag (Internet Explorer 8) nicht unterstützen oder diejenigen, die nicht Ogg/Vorbis (9++ Internet Explorer und Safari) unterstützen, fügt MediaElement.js einen Shim "dieser Browser aktualisieren", so dass sie alle funktionieren, wie wenn sie den Codec nativ unterstützt. (Hinweis: Ogg/Vorbis werden nicht auf mobilen Geräten spielbare.)

MediaElement.js bietet auch Unterstützung für das Track-Element, als auch systemeigene Vollbildmodus für Browser, die JavaScript-API implementiert haben. Sie können Ihre eigenen HTML5-Ereignisse hinzufügen oder Eigenschaften verfolgen und es funktioniert in jedem Browser und mobile Geräte.

Ich hoffe, dass ich euch gezeigt habe, die trotz ein paar Macken, die HTML5-video- und audio-Elemente, vor allem wenn gepaart mit der ausgezeichneten Bibliotheken, die ich vorgeschlagen habe, die einfach hinzufügen zu vorhandenen Websites und sollte standardmäßig für neue Projekte.

John Dyer ist der Direktor der Web-Entwicklung für das Dallas Theological Seminary (dts.edu). Er Blogs auf j.hn.

Dank der folgenden technischen Experten für die Überprüfung dieses Artikels: John Hrvatin und Brandon Satrom