Come verificare se il browser supporta HTML5?

Question

EDIT Ho cambiato un po 'di Javascript, in modo che se riesco a trovare una funzione javascript che rileva il supporto HTML5 video, si dovrebbe lavoro.

Ho un video player HTML5 che ha fallback flash, se HTML5 non è supportato, voglio che fallback a lampeggiare. Al momento sto utilizzando

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

E 'possibile fare il folllowing:

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

Cercando di trovare una bella idea soluzione facile.

In genere, potrei avere un <object> aggiuntivo nel tag video, ma ciò non è possibile a causa del modo in cui il lettore è inserito nella pagina.

Anche se posso rilevare il supporto HTML5 con un metodo forse inaffidabile, non sono sicuro come avere il mio HTML in base all'uscita del supporto

Answer 1

Hai avuto uno sguardo al http://www.modernizr.com/docs/#features-css

E ' può fare il rilevamento delle funzioni

Answer 2

Controlla tutto a Dive into HTML5 in particolare la sezione "Rilevazione delle tecniche HTML5". Ha praticamente tutto il necessario.

Answer 3

La soluzione migliore consiste nell'utilizzare qualcosa come Modernizr per eseguire il rilevamento delle funzionalità sul lato client. Modemizr è una libreria JavaScript open source, con licenza MIT che rileva il supporto per molte funzionalità CSS5 di HTML5 &. Se il tuo browser non supporta l'API canvas, la proprietà Modernizr.canvas sarà falsa.

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

Ref

Un'altra soluzione se si utilizza JQuery: Controllo del supporto per l'elemento canvas di HTML 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

Answer 4

Ecco come w3schools fa:

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." 
    } 
} 

Answer 5

un assegno liner ...

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

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