Dieser Artikel wurde maschinell übersetzt.

HTML5

Arbeiten mit Medien in HTML5

Jason Beres

 

Es sei denn, Sie auf einer einsamen Insel für das vergangene Jahr oder so gelebt haben, haben Sie wahrscheinlich die Summen und Hype um HTML5 gehört. Nein, HTML5 wird nicht die meisten Erkrankungen heilen noch endet Hunger in der Welt, aber es ist bereit, um die rich Internet Application Landschaft umformen. Mit den Hype über den neuen HTML-Standard ist es wichtig, dass die Diskussion wieder auf die Erde zu bringen. Hier sind die wichtigen Fakten, die Sie wissen über diese neue HTML-Spezifikation müssen:

• HTML5 ist die erste neue Version der Spezifikation seit 1999 – das Web wurde seitdem viel geändert.
• HTML5 werden dem neuen Standard für HTML, XHTML und HTML-DOM.
• HTML5 bietet ein Standardverfahren für die Wiedergabe von Medien – ein Schlüssel zu profitieren, da gab es keinen Standard für die Wiedergabe von Medien in einer Web-Seite ohne ein Browser-Plug-Ins und keine Garantie dafür, dass jeder Browser Plug-Ins unterstützen würde.
• HTML5 ist immer noch In Arbeit, aber die meisten modernen Browser haben einige HTML5-Tag-Unterstützung.

Silverlight 1.0 in 2007 ausgeliefert wurde, angepriesen Microsoft seine Video- und audio-Wiedergabe als primären Features und ein Hauptgrund, finden in Silverlight als Alternative zu Flash – die in einer Version oder einem anderen über 95 Prozent der weltweiten Browsern unterstützt. Dieses Artikels wird Silverlight auf rund 75 Prozent der weltweiten Browsern oder ungefähr drei jeweils vier Computer unterstützt. Aber wenn Sie zum Abspielen von Medien und nicht die Mühe oder soll die Abhängigkeit eines Plug-Ins, HTML5, ist die Antwort.

Um den Unterschied zwischen der Verwendung von HTML5-video-Tag und die traditionelle Object-Tag zum Abspielen von Medien zu sehen, betrachten Sie das Beispiel in Abbildung 1.

Abbildung 1 Die HTML-Video-Tag Vs. das Object-Tag zum Abspielen von Medien

<section>
    <h1>Using the HTML5 Video tag to play video</h1>
    <video src="video1.mp4" >
    </video>
</section>
<section>
    <h1>Using the Object tag to play media using the Flash plug-in</h1> 
    <object type="application/x-shockwave-flash"
               data="player.swf" width="290" height="24">
        <param name="movie" value="player.swf">
    </object>
</section>

Was ist daran so großartig? Beide Beispiele sind einfach und leicht zu implementieren. Aber der wichtigste Punkt hierbei ist, dass, da die <video> Tag ist ein Standard, wird es keine Frage, die es sollte zum Abspielen von Medien verwendet. Sie müssen nicht zu erraten, wenn ein Browser eine bestimmte Version einer bestimmten Plug-In installiert haben, um Ihre Medien wiederzugeben. Der standard-Teil ist, was wurde aus HTML-Code fehlt.

Unterstützte Medienformate in HTML5

Um Medien in Ihrer nächsten HTML5-Anwendung zu verwenden, müssen Sie wissen, welche Formate unterstützt werden. HTML5 unterstützt AAC, MP3 und Ogg Vorbis für Audio und Ogg Theora, WebM und MPEG-4-Video.

Obwohl HTML5 diese Media-Formate unterstützt, unterstützt jedoch nicht alle Browser jedes Format. Abbildung 2 zeigt die aktuellen Browsern und die Medienformate, die sie unterstützen.

Abbildung 2-Media-Unterstützung in aktuellen Browsern

Mithilfe des Video-Tags

Um eine Video in einer HTML5-Seite zu spielen, verwenden Sie einfach die <video> -Tag wie hier gezeigt:

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

https://www.w3.org/TR/2011/WD-html5-20110113/video.html#the-source-element legt den oder die Namen des Videos zu spielen und das Steuerelement vom Typ Boolean Switch Diktat, ob die Standard-Wiedergabe zeigt steuert. Sie können auch die beiden booleschen Eigenschaften – automatische Wiedergabe und Loop – beim Einrichten des video-Tags. Abbildung 3 listet jede Eigenschaftenattribut und seinen Wert.

Abbildung 3 Video-Tag-Eigenschaften

Attribut	Wert	Beschreibung
Audio	Stummgeschaltet	Definiert den Standardzustand des Tons. Derzeit nur stumm geschaltet ist zulässig.
Automatische Wiedergabe	Automatische Wiedergabe	Falls vorhanden, beginnt die Videowiedergabe, sobald sie fertig ist.
Steuerelemente	Steuerelemente	Wiedergabe, Pause und Volume-Steuerelemente eingefügt.
Height	Pixel	Legt die Höhe des video-Players fest.
Loop	Loop	Falls vorhanden, wird das Video wieder gestartet werden, jedes Mal, wenn dies abgeschlossen ist.
Poster	URL	Gibt den URL eines Bildes, das Video darstellt.
Preload	Preload	Falls vorhanden, wird das Video beim Laden der Seite geladen ist und ausgeführt wird. Es wird ignoriert, wenn die automatische Wiedergabe vorhanden ist.
Src	URL	Der URL des Videos wiedergeben.
Width	Pixel	Setzt die Breite des video-Players.

Im folgenden Codebeispiel veranschaulicht einige der Haupteigenschaften auf den video-Player in ein gängiges Szenario, die Einstellung von Höhe und Breite enthält, Autoplay, Loop und Steuerelemente Eigenschaften der Wiedergabe angezeigt werden, pause, und Lautstärkeregler sowie ein fallback-Fehlermeldung angezeigt.

<video src="video.mp4" width="320" height="240" autoplay controls loop>
    Your browser does not support the video tag.
</video>

Sie können auch bestimmte MIME-Typeusing das Type-Attribut und der Codec in dem Quellelement festlegen. Diese Beispiele verwenden das Type-Attribut, um den MIME-Typ und die Codierung des Mediums festzulegen:

<!-- H.264 Constrained baseline profile video (main and extended video compatible)
  level 3 and Low-Complexity AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
  AAC audio in MP4 container -->
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

Sie können Eigenschaften festlegen, in HTML oder JavaScript. Der folgende Code zeigt, wie die Steuerelemente vom Typ Boolean-Eigenschaft in HTML- und JavaScript festgelegt.

<!-- 3 ways to show the controls -->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
       ('controls',
        'controls');

Wenn Sie nicht wissen, ob ein Browser die Seite gerendert wird, benötigen Sie einen Fallbackmechanismus, um Ihre Medien wiederzugeben. Alles, was Sie tun ist Liste der video-Formate, wenn Sie Ihr Video in gerendert haben, und der Browser wiedergegeben wird, unterstützt Ersteres. Als letztes Mittel, um den Benutzer darüber informiert, dass der Browser verwendet wird, nicht systemeigenen HTML5-Wiedergabe von Video unterstützt, können Sie auch Text hinzufügen. Der folgende Code enthält mehrere Bildquellen sowie ein fallback Meldung keine HTML5-Unterstützung.

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

Wenn um sicherzustellen, dass Ihr video abgespielt werden soll, können Sie spielen eine Flash-Version als auch das Object-Tag einschließen wie folgt:

<video controls>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <object data="videoplayer.swf">
        <param name="flashvars" value="video1.mp4">
        HTML5 Video and Flash are not supported
    </object>
</video>

Sie können auch JavaScript verwenden, um zu überprüfen, ob ein video-Format unterstützt wird, überprüfen Sie die CanPlayType-Eigenschaft, wie folgt:

var video = document.getElementsByTagName('video')[0];
if (video.canPlayType)
   { // video tag supported
if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
      { // it may be able to play}
        else
      {// the codecs or container are not supported
        fallback(video);
  }
}

Wenn Sie etwas anschaulicher als fallback Textversion tun möchten, können Sie den Onerror-Ereignis-Listener, den Fehler zu übergeben:

<video src="video.mp4"
       onerror="fallback(this)">
       video not supported
</video>

Die Poster-Eigenschaft können Sie den URL eines Bilds an Stelle des Videos auf dem Formular angeben. In der Regel sind Sie zeigen eine Liste von Videos oder ein einzelnes Video in einem Formular, so haben eine einfache Möglichkeit, zeigen eine Vorschau des Videos in Form eines Bildes eine verbesserte Benutzerfreundlichkeit bietet. Hier ist die Eigenschaft Poster in Aktion:

<video src="video1.mp4" poster="preview.jpg" </video>

Schließlich können Sie mit ein wenig JavaScript und grundlegende HTML-, einen interaktiveren video-Player erstellen. Abbildung 4 zeigt, wie Sie einen video-Player zu einem Formular mit JavaScript hinzufügen und wie Sie reagieren auf Benutzereingaben an das Steuerelement.

Abbildung 4 Interaktion mit Video in JavaScript

var video = document.createElement('video');
video.src = 'video1.mp4';
video.controls = true;
document.body.appendChild(video);
var video = new Video();
video.src = 'video1.mp4';
var video = new Video('video1.mp4')
<script>
    var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

Für eine vollständige Liste der Ereignisse und Funktionen zur Wiedergabe von Videos, lesen Sie in diesem Abschnitt der Spezifikation unter http://www.w3.org/TR/html-markup/video.html.

Mithilfe des Audio-Tags

Mit dem audio-Tag ist ähnlich wie mit dem video-Tag: eine oder mehrere Audiodateien zu übergeben, auf das Steuerelement und die erste Datei, die der Browser unterstützt gespielt wird.

<audio src="audio.ogg" controls>
 Your browser does not support the audio element.
</audio>

Abbildung 5 Listet die verfügbaren Eigenschaften im audio-Tag. Das Steuerelement muss nicht wie einen video-Player angezeigt werden soll, so dass Eigenschaften wie Höhe, Breite und Poster nicht enthalten sind.

Abbildung 5-Audio-Tag-Eigenschaften

Attribut	Wert	Beschreibung
Automatische Wiedergabe	Automatische Wiedergabe	Falls vorhanden, beginnt die Audio spielen, sobald sie fertig ist.
Steuerelemente	Steuerelemente	Steuerelemente, z. B. Wiedergabe-Schaltfläche werden angezeigt.
Loop	Schleife	Falls vorhanden, das audio beginnt erneut abspielen (Schleifen) Wenn sie das Ende erreicht.
Preload	Preload	Falls vorhanden, werden die Audiodaten beim Laden der Seite geladen wird und ist bereit zum Ausführen. Es wird ignoriert, wenn die automatische Wiedergabe vorhanden ist.
Src	URL	Der URL der Audiodatei wiedergeben.

Sie können mehrere Dateien in den audio-Tag übergeben, mit dem video-Tag, und spielen die erste Datenbank, die unterstützt wird. Sie können auch eine fallback-Nachricht verwenden, falls der Browser keine audio-Tag wie folgt unterstützt:

<audio controls autoplay>
   <source src="audio1.ogg" type="audio/ogg" />
   <source src="audio1.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

Zusammenfassung

HTML5 ist der nächste Standard für das Web, und je nach den Browsern, die Sie verwenden möchten, können Sie einige der neuen Tags, wie z. B. Audio- und Videodaten, jetzt mit.Seien Sie vorsichtig, wenn HTML5, jedoch verwenden, da nicht alle Browser die neuen Tags unterstützt und selbst wenn eine der Fall ist, möglicherweise nicht alle Media-Format unterstützt.Wenn Sie einen modernen Browser, der HTML5 unterstützt verwenden, müssen Sie den zusätzlichen Aufwand zum Verarbeiten von Medien in allen Formaten, damit Benutzer Erfolg zu führen.Hier sind einige großen Webressourcen, die Browser-Support-Informationen bereitstellen, sowie alle anderen Informationen, Sie müssen HTML5 Medien Erfolg zu gewährleisten:

• https://www.w3.org/TR/2011/WD-html5-20110113/video.html
• http://dev.w3.org/html5/spec/Overview.HTML
• http://www.w3schools.com/html/html5_intro.asp
• http://html5test.com/
• http://caniuse.com/

Jason Beres ist Vice President of Product Management, Community und bei Infragistics und leitet nutzerorientierte, innovative Features und Funktionen in alle Produkte für Infragistics tätig.Jason Zander ist ein Microsoft.NET MVP und ist ein aktives Mitglied der.NET-Community.Er spricht auf Dutzende von Veranstaltungen und Konferenzen weltweit jedes Jahr.Er ist Autor von acht Büchern, z. B. Visual Basic, C#, SQL Server und Silverlight Themen; sein neuestes ist Professional Silverlight 4 (Wrox 2010).Erreichen Sie an Jason jasonb@infragistics.com oder auf Twitter @ Jasonberes.