HTML5実戦とメディア要素の解析（4.コーデックサポートとAudioコンストラクタの検出）

HTML5メディア要素はコーデックサポートを検出します

メディア要素はオーディオおよびビデオ機能を実装できますが、すべてのブラウザがビデオタグとオーディオタグのすべてのコーデックをサポートしているわけではありません。つまり、開発者は多くのメディアソースを提供する必要があります。 JavaScript API は、ブラウザが特定の形式とコーデックをサポートしているかどうかを検出できます。どちらのメディア要素にも、フォーマット/コーデック文字列を受け入れ、「おそらく」、「たぶん」、または「」 (空の文字列) を返す canPlayType() メソッドがあります。空文字列は false 値であり、「おそらく」と「たぶん」は両方とも true 値であるため、if 条件のテストで true に変換でき、if の判定条件として使用できます。フォーマット/コーデックを検出する方法は以下の通りです

JavaScript code

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

canPlayType()にMIMEタイプを渡した場合、戻り値は「maybe」または空の文字列になる可能性が高くなります。これは、メディア ファイル自体がオーディオまたはビデオの単なるコンテナであるため、実際にファイルを再生できるかどうかを決定するのはエンコード形式であるためです。 MIME タイプとエンコーダーの両方を渡すことにより、返される文字列が「おそらく」になる可能性が高くなります。小さな例は次のとおりです

HTMLコード

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

JavaScriptコード

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

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

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

コーデックは引用符で囲む必要があります。以下は、サポートされているオーディオ形式とコーデックの紹介です。

AAC形式：string audio/mp4、codecs=”mp4a.40.2”; 対応ブラウザ：IE9+、Safari 4+、Safari for iOS

対応ブラウザ：string audio/mpeg;

Vorbis形式: string audio/ogg, codecs="vorbis"; サポートされているブラウザ: Firefox 3.5 以降、Chrome、Opera 10.5 以降

WAV 形式: string audio/wav, codecs="1"; サポートされているブラウザ: Firefox 3.5 以降、Opera 10.5 以降, Chrome

以下はcanPlayType()を使って動画形式のコーデックを検出しています。

H.264 形式: string video/mp4, codecs="avc1.42E01E, mp4a.40.2"; サポートされているブラウザ: IE9+、Safari 4+、Safari for iOS、Webkit for Android

Theora: string video /ogg、コーデック="theora"; サポートされているブラウザ: Firefox 3.5 以降、Opera 10.5 以降、Chrome

WebM: video/webm、codecs="vp8, vorbis"; サポートされているブラウザ: Firefox 4 以降、Opera 10.6 以降、Chrome

HTML5 メディア要素の Audio コンストラクター

ネイティブ JavaScript には、いつでもオーディオを再生できるコンストラクター Audio があります。どちらも DOM 要素であるという観点から見ると、Audio オブジェクトは Image オブジェクトに非常に似ていますが、Audio オブジェクトは Image オブジェクトのようにドキュメントに挿入する必要はありません。新しいインスタンスを作成し、オーディオ ソース ファイルを渡すだけです。小さな例は次のとおりです

JavaScript code

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

新しい Audio インスタンスを作成して、指定されたファイルのダウンロードを開始します。ダウンロードが完了したら、play() メソッドを呼び出してオーディオを再生します。 iOS では、play() を呼び出すとダイアログ ボックスが表示され、ユーザーの許可が得られるまで再生できません。 1 つのオーディオを再生した後、もう一方のオーディオを再生したい場合は、onfinish イベント ハンドラーで play() メソッドを呼び出す必要があります。

上記は、HTML5 の実戦とメディア要素の分析 (4. コーデック サポートとオーディオ コンストラクターの検出) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。