ホームページ > 記事 > ウェブフロントエンド > HTML5 ビデオ サポートの検出 (ブラウザがビデオ再生をサポートしているかどうかを確認する)_html5 チュートリアル スキル
HTML5 ビデオ サポートの検出 (ブラウザがビデオ再生をサポートしているかどうかを確認する)_html5 チュートリアル スキル
- WBOYオリジナル
- 2016-05-16 15:49:373151ブラウズ
コードをコピーします
コードは次のとおりです:Web サイトがさらに増えていますビデオ再生を提供するようになりました (プラグインではありません)。 HTML5 はビデオを表示するための標準を提供します。では、ブラウザがビデオ再生をサポートしているかどうかを確認するにはどうすればよいでしょうか。以下に例を書いてみましょう。
コードをコピーします
コードは次のとおりです:<本文>
;/ h1> ブラウザが HTML5 ビデオをサポートしているかどうかを確認します:
は次のとおりです:
🎜>
コードをコピーします
コードは次のとおりです: function checkVideo()
{ {
//ビデオ要素を作成します
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="申し訳ありません。ビデオはサポートされていません。"
}
}
//ビデオ要素を作成します
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"
"" (空の文字列)。ブラウザがビデオまたはオーディオをサポートしていないことを示します。
注: 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"
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。