Tatsächlicher HTML5-Kampf und Analyse von Medienelementen (4. Erkennen der Codec-Unterstützung und des Audiokonstruktors)

HTML5-Medienelemente erkennen Codec-Unterstützung

Obwohl Medienelemente Audio- und Videofunktionen implementieren können, sind dies nicht alle. Alle Browser unterstützen alle Codecs für das Video-Tag und das Audio-Tag, was bedeutet, dass Entwickler viele Medienquellen bereitstellen müssen. Die JavaScript-API kann erkennen, ob der Browser ein bestimmtes Format und einen bestimmten Codec unterstützt. Beide Medienelemente verfügen über eine canPlayType()-Methode, die eine Format-/Codec-Zeichenfolge akzeptiert und „wahrscheinlich“, „vielleicht“ oder „“ (leere Zeichenfolge) zurückgibt. Die leere Zeichenfolge ist ein falscher Wert, und „wahrscheinlich“ und „vielleicht“ sind beide wahre Werte, sodass sie im if-Bedingungstest in true konvertiert werden kann, sodass sie als Bedingung für die Beurteilung im if verwendet werden kann. Die Methode zum Erkennen von Format/Codec ist wie folgt

　JavaScript-Code

if(audio.canPlayType("audio/mpeg")){
	//进一步编写
}

Bei Übergabe an canPlayType( ) Wenn ein MIME-Typ eingegeben wird, ist der Rückgabewert wahrscheinlich „vielleicht“ oder ein leerer String. Dies liegt daran, dass die Mediendatei selbst nur ein Container für Audio oder Video ist. Was wirklich bestimmt, ob die Datei abgespielt werden kann, ist das Codierungsformat. Durch die Übergabe sowohl eines MIME-Typs als auch eines Encoders erhöht sich die Wahrscheinlichkeit, dass die zurückgegebene Zeichenfolge „wahrscheinlich“ wird. Ein kleines Beispiel ist wie folgt

　HTML-Code

<audio src="meng.ogg" id="myAudio"></audio>

　 JavaScript-Code

var audio = document.getElementById("myAudio");

//很可能"maybe"
if(audio.canPlayType("audio/mpeg")){
	//进一步编写
}

//可能是"probably"
if(audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
	//进一步编写
}

Der Codec muss in Anführungszeichen gesetzt werden. Im Folgenden finden Sie eine Einführung in die unterstützten Audioformate und Codecs.

AAC-Format: string audio/mp4, codecs="mp4a.40.2"; Unterstützte Browser: IE9+, Safari 4+ und Safari für iOS

Unterstützte Browser : IE9+, Chrome

Vorbis-Format: string audio/ogg, codecs="vorbis"; Unterstützte Browser: Firefox 3.5+, Chrome, Opera 10.5+

WAV-Format: string audio/wav, codecs="1"; unterstützte Browser: Firefox 3.5+, Opera 10.5+, Chrome

Im Folgenden wird canPlayType() verwendet, um den Videoformat-Codec zu erkennen.

H.264-Format: string video/mp4, codecs="avc1.42E01E, mp4a.40.2"; Unterstützte Browser: IE9+, Safari 4+, Safari für iOS, Webkit für Android

Theora: string video/ogg, codecs="theora"; Unterstützte Browser: Firefox 3.5+, Opera 10.5+, Chrome

WebM: video/webm, codecs="vp8, vorbis" ;Unterstützte Browser: Firefox 4 +, Opera 10.6+, Chrome

　Audio-Konstruktor von HTML5-Medienelementen

In nativem JavaScript gibt es eine Konstruktorfunktion Audio, die jederzeit Audio abspielen kann Zeit. Da es sich bei beiden um DOM-Elemente handelt, ist das Audio-Objekt dem Image-Objekt sehr ähnlich, das Audio-Objekt muss jedoch nicht wie das Image-Objekt in das Dokument eingefügt werden. Erstellen Sie einfach eine neue Instanz und übergeben Sie die Audioquelldatei. Ein kleines Beispiel ist wie folgt:

　JavaScript-Code

var audio = new Audio("meng.mp3");
audio.addEventListener('canplaythrough',function(event){
	audio.play();
}, false);	

Erstellen Sie eine neue Audio-Instanz, um mit dem Herunterladen zu beginnen angegebene Datei. Rufen Sie nach Abschluss des Downloads die Methode play() auf, um das Audio abzuspielen. Unter iOS wird beim Aufrufen von play() ein Dialogfeld angezeigt und die Wiedergabe kann nur nach Einholung der Erlaubnis des Benutzers abgespielt werden. Wenn Sie das andere Ende des Audios abspielen möchten, nachdem Sie ein Audiostück abgespielt haben, müssen Sie die Methode play() im Ereignishandler onfinish aufrufen.

Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse von Medienelementen (4. Testen der Codec-Unterstützung und des Audio-Konstruktors). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!