如何檢查瀏覽器是否支持HTML5？

編輯我已經改變了一些JavaScript現在，所以如果我能找到檢測HTML5視頻支持，它應該工作的JavaScript函數。如何檢查瀏覽器是否支持HTML5？

我有一個HTML5視頻播放器具有閃回回退，如果HTML5不支持，我希望它回退到閃存。即時通訊目前使用

 then load my custom player else use SWFObject to render it.

是否有可能做folllowing：

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

試圖找到一個不錯的簡單的解決方案的想法。

通常我將能夠在視頻標籤的附加<object>，但是這不會是可能的，因爲球員被插入到頁面的方式。

即使我能察覺有可能不可靠的方法對HTML5的支持，我不知道如何根據支持的輸出有我的HTML

來源

2012-02-29 JustAnotherDeveloper

沒有一個1：支持任意一個功能的HTML 5和HTML 5測試提出了另一個任意特徵'推出瀏覽器之間的一對一映射navigator.geolocation'看看瀏覽器是否會支持你的視頻是一個可怕的想法。 – Quentin 2012-02-29 11:45:52

這就是爲什麼我不想使用它/ – JustAnotherDeveloper 2012-02-29 11:46:40

我有同樣的問題，如果任何人得到答案 – Lijo 2014-01-30 01:16:01

你吃過看看http://www.modernizr.com/docs/#features-css

它可以做特徵檢測

來源

2012-02-29 11:44:59 Manatok

謝謝，我做了一個JS方法來做到這一點，但似乎Modernizr只是.....更好 – JustAnotherDeveloper 2012-02-29 12:00:13

但我們如何使用這個現代化器可以給出一些示例代碼 – Lijo 2014-01-29 11:38:17

@ 404 - 請參見http://modernizr.com/docs/#features-html5中的modernizrs HTML特性檢測。例如，如果你想檢查是否支持HTML5畫布，你可以使用if（Modernizr.canvas）{...'你可能還想看看HTML5 Shiv's在老版瀏覽器中嘲笑HTML5。 – JustAnotherDeveloper 2014-02-04 10:19:38

查看Dive into HTML5的所有內容，尤其是'檢測HTML5技術'部分。它幾乎包含了你可能需要的一切。

來源

2012-02-29 11:52:10 mattl

更好的解決方案是使用類似Modernizr做在客戶side.Modernizr的特徵檢測是檢測許多HTML5 & CSS3特性的支持一個開源的，麻省理工學院授權的JavaScript庫。如果您的瀏覽器不支持畫布API，則Modernizr.canvas屬性將爲false。

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

Ref

另一種解決方法，如果您使用JQuery：檢查支持HTML的canvas元素5

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

Ref

來源

2012-09-07 06:26:40 user1653896

或者對於獎勵積分，使用Modernizr中的YEPNOPE插件，然後在不支持的情況下加載excanvas :) – JustAnotherDeveloper 2012-09-07 15:09:53

-2

這裏是如何W3Schools的做的：

function checkVideo() 
{ 
if(!!document.createElement('video').canPlayType) 
    { 
    var vidTest=document.createElement("video"); 
    oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); 
    if (!oggTest) 
    { 
    h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
    if (!h264Test) 
     { 
     document.getElementById("checkVideoResult").innerHTML="Sorry. No video support." 
     } 
    else 
     { 
     if (h264Test=="probably") 
     { 
     document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!"; 
     } 
     else 
     { 
     document.getElementById("checkVideoResult").innerHTML="Meh. Some support."; 
     } 
     } 
    } 
    else 
    { 
    if (oggTest=="probably") 
     { 
     document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!"; 
     } 
    else 
     { 
     document.getElementById("checkVideoResult").innerHTML="Meh. Some support."; 
     } 
    } 
    } 
else 
    { 
    document.getElementById("checkVideoResult").innerHTML="Sorry. No video support." 
    } 
}

來源

2014-05-26 11:31:02

一個襯墊檢查...

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

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

來源

2016-02-17 18:18:15

完美地工作！ – lstefani 2017-01-14 14:31:13

如何檢查瀏覽器是否支持HTML5？

回答

相關問題