Как проверить, поддерживает ли браузер HTML5?

Question

РЕДАКТИРОВАТЬ Я изменил некоторые Javascript сейчас, поэтому, если я могу найти функцию javascript, которая обнаруживает поддержку видео HTML5, она должна работать.

У меня естьВидеоплеер 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 основан на выводе поддержки

Answer 1

Вы смотрели на http://www.modernizr.com/docs/#features-css

Это может сделать функцию обнаружения

Answer 2

Лучшее решение - использовать что-то вроде Modernizr для обнаружения ваших функций на стороне клиента. Modernizr - это JavaScript-библиотека с открытым исходным кодом, лицензированная MIT, которая обнаруживает поддержку многих функций HTML5 и CSS3. Если ваш браузер не поддерживает API Canvas, свойство Modernizr.canvas будет иметь значение false.

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

Ref

Другое решение, если вы используете JQuery: Проверка поддержки элемента canvas в 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 3

Проверка одного лайнера ...

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

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

Answer 4

Проверьте все на Погрузитесь в HTML5 , особенно в раздел «Обнаружение методов HTML5».В нем есть почти все, что вам может понадобиться.

Answer 5

Вот как это делает 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."
  }
}