ब्राउज़र कैसे HTML5 का समर्थन करता है या नहीं जांचें?

Question

संपादित करें मैंने अब कुछ जावास्क्रिप्ट बदल दिया है, इसलिए यदि मुझे एक जावास्क्रिप्ट फ़ंक्शन मिल सकता है जो HTML5 वीडियो समर्थन का पता लगाता है, तो कार्य करना चाहिए।

मेरे पास एक HTML5 वीडियो प्लेयर है जिसमें फ्लैश फ़ॉलबैक है, अगर HTML5 समर्थित नहीं है, तो मैं इसे फ्लैश करने के लिए फ़ॉलबैक करना चाहता हूं। इम वर्तमान में

<!--[if !IE]><!--> 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 है करने के लिए यकीन नहीं है

Answer 1

आप http://www.modernizr.com/docs/#features-css

यह पर एक नज़र हुई है सुविधा पहचान

Answer 2

Dive into HTML5 पर विशेष रूप से 'एचटीएमएल 5 तकनीक का पता लगाने' अनुभाग में सब कुछ देखें। इसमें आपको बहुत कुछ चाहिए जो आपको चाहिए।

Answer 3

बेहतर समाधान क्लाइंट-साइड पर अपनी सुविधा का पता लगाने के लिए Modernizr जैसे कुछ का उपयोग करना है। मॉडर्नर एक ओपन सोर्स, एमआईटी-लाइसेंस प्राप्त जावास्क्रिप्ट लाइब्रेरी है जो कई HTML5 & CSS3 सुविधाओं के लिए समर्थन का पता लगाता है। यदि आपका ब्राउज़र कैनवास API का समर्थन नहीं करता है, तो Modernizr.canvas प्रॉपर्टी गलत होगी।

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

Ref

एक अन्य समाधान अगर आप JQuery का उपयोग कर रहे: 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

यह इस प्रकार से 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." 
    } 
} 

Answer 5

लाइनर की जांच एक ...

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

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