メディア要素はオーディオおよびビデオ機能を実装できますが、すべてのブラウザがビデオタグとオーディオタグのすべてのコーデックをサポートしているわけではありません。つまり、開発者は多くのメディアソースを提供する必要があります。 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
ネイティブ 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) に注目してください。