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

EDIT Я изменил Javascript сейчас, поэтому, если я могу найти функцию javascript, которая обнаруживает поддержку HTML5 Video, она должна работать.

У меня есть видеопроигрыватель HTML5 с флеш-резервностью, если HTML5 не поддерживается, я хочу, чтобы он вернулся к flash. В настоящее время я использую

<!--[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 на основе вывода поддержки

Ответы

Ответ 2

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

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

Ссылка

Другое решение, если вы используете 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

Ссылка

Ответ 3

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

Ответ 4

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

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

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

Ответ 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."
  }
}