如何检测浏览器是否支持 MJPEG？答案

【问题标题】：How can I detect whether a browser supports MJPEG?如何检测浏览器是否支持 MJPEG？
【发布时间】：2011-12-15 14:30:06
【问题描述】：

除 IE 之外的现代浏览器处理 MJPEG (Motion JPEG)。 Here 是一个示例小提琴。

我可以检测到对MJPEG 的支持吗？我已经白费了Modernizr。

【问题讨论】：

标签： javascript html html5-video browser-feature-detection

【解决方案1】：

Modernizr only supports the following formats for detection right now: ogg, webm and h264.

视频元素有一个名为 canPlayType(format) 的调用，这确实是您唯一的选择（如果它适用于 mjpg）。你的检测逻辑看起来像这样（不是格式会不同）。

var videoElement = document.createElement('video');
if(!!videoElement.canPlayType)
{
  var browserConfidence = videoElement.canPlayType('video/mjpeg; codecs="insert, them"');
  if(browserConfidence == "probably")
  {
    // high confidence
  }
  else if(browserConfidence == "maybe")
  {
    // low confidence
  }
  else
  {
    // no confidence... it definately will not play
  }
}

确保您visit the W3C's information on canPlayType。看起来 MIME 类型应该是“video/mjpeg”，而不是您之前指定的“video/mjpg”。

【讨论】：

【解决方案2】：

我尝试了最明显的方法来检测图像是否可以加载：

$output = $('<img id="webcam">')
        .attr('src', src)
        .load(function(){alert('ok')})
        .error(function(){alert('error')});

如果图像可以加载，load 事件将被触发，否则error。在最近的 Chrome 和 IE8 中检查了这一点。按预期工作。

【讨论】：

这不适用于 Android 网络浏览器。至少在两部不同的三星手机上，默认的 Android 浏览器既不会显示 MJPEG，也不会触发加载或错误事件——它会尝试加载“整个”流而不渲染它。

【解决方案3】：

遗憾的是，您需要使用 ActiveX 控件来支持 IE 中的 mjpg。见How to embed mjpeg file on a webpage。

【讨论】：