web-dev-qa-db-ja.com

ブラウザがHTML5をサポートしているかどうかを確認する方法は？

[〜＃〜] edit [〜＃〜]私はいくつかのJavascriptを変更しました。そのため、HTML5ビデオのサポートを検出するjavascript関数が見つかった場合、動作します。

フラッシュフォールバックを備えたHTML5ビデオプレーヤーがあります。HTML5がサポートされていない場合は、フラッシュにフォールバックします。現在使用中

<!--[if !IE]><!--> then load my custom player else use SWFObject to render it.

以下を行うことは可能ですか？

`  If (HTML5 supported browser) {
 <some html and script>  (My custom player)
}else{
  <different html and script> (I would call  SWFobject here)
}
`

ニースの簡単な解決策のアイデアを見つけようとしています。

通常、追加の<object>は動画タグに含まれていますが、プレーヤーへのページの挿入方法が原因でこれは不可能です。

おそらく信頼できない方法でHTML5サポートを検出できますが、サポートの出力に基づいてHTMLをどのように持つかはわかりません。

javascriptjqueryhtml5browserswfobject
22
JustAnotherDeveloper

http://www.modernizr.com/docs/#features-css をご覧になりましたか？

機能検出を行うことができます

18
Manatok

より良い解決策は、 Modernizr のようなものを使用して、クライアント側で機能検出を行うことです。Modernizrは、多くのHTML5およびCSS3機能のサポートを検出するMITライセンスのオープンソースのJavaScriptライブラリです。ブラウザがキャンバスAPIをサポートしていない場合、Modernizr.canvasプロパティはfalseになります。

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

参照

JQueryを使用している場合の別のソリューション：HTML 5のcanvas要素のサポートの確認

var test_canvas = document.createElement("canvas") //try and create sample canvas element
var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element
alert(canvascheck) //alerts true if browser supports canvas element

参照

9
user1653896

ワンライナーチェック...

// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function") 

// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)
7
Timothy Perez

Dive into HTML5 のすべてをチェックしてください。特に「Detecting HTML5 Techniques」セクション。必要なものはほぼすべて揃っています。

4
mattl