Cách Kiểm tra xem trình duyệt có hỗ trợ HTML5 không?

Question

EDIT Tôi đã thay đổi một số Javascript ngay bây giờ, vì vậy nếu tôi có thể tìm thấy một chức năng javascript phát hiện hỗ trợ HTML5 Video, nó nên hoạt động.

Tôi có trình phát video HTML5 có dự phòng flash, nếu HTML5 không được hỗ trợ, tôi muốn nó dự phòng thành flash. Im hiện đang sử dụng

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

Có thể làm folllowing:

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

Cố gắng tìm một ý tưởng giải pháp dễ dàng thoải mái.

Thông thường tôi có thể có thêm <object> trong thẻ video, nhưng điều này sẽ không thể thực hiện được do cách trình phát được chèn vào trang.

Mặc dù tôi có thể phát hiện sự ủng hộ HTML5 với một phương pháp có thể không đáng tin cậy, tôi không chắc chắn làm thế nào để có HTML của tôi dựa trên đầu ra của sự hỗ trợ

Answer 1

Quý vị có một cái nhìn tại http://www.modernizr.com/docs/#features-css

Nó có thể làm phát hiện tính năng

Answer 2

Kiểm tra mọi thứ tại Dive into HTML5 đặc biệt là phần 'Phát hiện kỹ thuật HTML5'. Nó có khá nhiều thứ bạn cần.

Answer 3

Giải pháp tốt hơn là sử dụng một cái gì đó như Modernizr để phát hiện tính năng của bạn ở phía máy khách.Modernizr là một thư viện JavaScript mã nguồn mở được MIT cấp phép phát hiện hỗ trợ cho nhiều tính năng HTML5 & CSS3. Nếu trình duyệt của bạn không hỗ trợ canvas canvas, thuộc tính Modernizr.canvas sẽ là false.

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

Ref

Một giải pháp khác nếu bạn đang sử dụng JQuery: Kiểm tra hỗ trợ cho các phần tử canvas của 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

Sau đây là cách w3schools làm nó:

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

Một séc lót ...

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

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