HTML5 ビデオ サポートの検出 (ブラウザがビデオ再生をサポートしているかどうかを確認する)_html5 チュートリアル スキル

コードをコピーします

コードは次のとおりです:

Web サイトがさらに増えていますビデオ再生を提供するようになりました (プラグインではありません)。 HTML5 はビデオを表示するための標準を提供します。では、ブラウザがビデオ再生をサポートしているかどうかを確認するにはどうすればよいでしょうか。以下に例を書いてみましょう。

コードをコピーします

コードは次のとおりです:

<本文>

;/ h1> ブラウザが HTML5 ビデオをサポートしているかどうかを確認します:

チェック

は次のとおりです:

🎜>

コードをコピーします

コードは次のとおりです: function checkVideo()

{

if(!!document .createElement('video ').canPlayType)

{
//ビデオ要素を作成します
var vidTest=document.createElement("video");
//ogg 形式のビデオが可能かどうかを検出します
oggTest= vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
//MP4 形式のビデオが再生できるかどうかを検出します再生される
h264Test=vidTest .canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById(" checkVideoResult").innerHTML="申し訳ありません。ビデオはサポートされていません。"
}
else
{
if (h264Test=="おそらく")
{
document.getElementById(" checkVideoResult").innerHTML="はい ! 完全にサポートしています!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="そうですね。 >}
}
}
else
{
if (oggTest=="おそらく")
{
document.getElementById("checkVideoResult").innerHTML="Yes ! 完全にサポートします!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="まあ、ある程度のサポートです。";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="申し訳ありません。ビデオはサポートされていません。"
}
}

コードをコピーします

コードは次のとおりです: canPlayType メソッドの説明: 1. : ブラウザが指定されたオーディオ/ビデオ タイプを再生できるかどうかを確認します。

2. 戻り値:

「おそらく」、ブラウザーがビデオまたはオーディオをサポートする可能性が最も高いことを示します。

「おそらく」は、ブラウザがビデオまたはオーディオをサポートする可能性があることを意味します。
"" (空の文字列)。ブラウザがビデオまたはオーディオをサポートしていないことを示します。
注: Internet Explorer 8 以前のバージョンでは、この方法はサポートされていません。
構文: audio|video.canPlayType(type))
パラメータの説明:
type: 検出されるオーディオまたはビデオのタイプ、
共通の値: video/ogg video/mp4; webm ; audio/mpeg;audio/ogg;audio/mp4
共通の値 (検出するオーディオまたはビデオ コーデックを含む):
codecs="theora, vorbis"
video/ mp4 ; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg"
audio/mp4; " mp4a.40.5"