使用JavaScript检测支持的视频格式

Over the past few years we've been seeing new audio, video, and image formats take shape to challenge the legacy formats that we've used since the web's inception.  This is a great development as we have more processing power and better compression algorithms have been developed, leading to faster load times and rendering.  Hooray for speed!

在过去的几年中，我们已经看到新的音频，视频和图像格式正在形成，以挑战自网络诞生以来就一直使用的旧格式。 这是一项伟大的进步，因为我们拥有更多的处理能力，并且已经开发出了更好的压缩算法，从而缩短了加载时间和渲染速度。 速度万岁！

The problem:  as with every other features added to the browser, some browsers get media format support faster than others, and some browsers refuse to support given formats.  Simply put:  we now need to do feature detection on media, something we've not traditionally had to do.  A while back I posted about how you can detect WEBP support in the browser and now I'd like to show you how to detect supported video formats -- it's easier than you think!

问题：与浏览器中添加的所有其他功能一样，某些浏览器获得媒体格式支持的速度比其他浏览器快，而某些浏览器拒绝支持给定的格式。 简而言之：我们现在需要在媒体上进行特征检测，这是我们传统上不必要做的。 不久前，我发布了有关如何在浏览器中检测WEBP支持的信息，现在我想向您展示如何检测支持的视频格式－比您想象的要容易！

HTMLVideoElement.prototype.canPlayType (HTMLVideoElement.prototype.canPlayType)

canPlayType is the secret to detecting video format support in the browser.  To use this method you must first create a <video> element instance:

canPlayType是检测浏览器中视频格式支持的秘诀。 要使用此方法，必须首先创建一个<video>元素实例：

const video = document.createElement('video');

You then call canPlayType, passing in the format's MIME type and additional details as needed:

然后，您可以调用canPlayType ，根据需要传入格式的MIME类型和其他详细信息：

video.canPlayType('video/webm; codecs="vp8, vorbis"'); // "probably"

There are three possible results from canPlayType:

canPlayType有三种可能的结果 ：

• "probably" : The media type appears to be playable

  "probably" ：媒体类型似乎可播放

• "maybe": Cannot tell if the media type is playable without playing it

  "maybe" ：如果不播放媒体类型，则无法判断它是否可播放

• "": The media type is not playable

  "" ：媒体类型不可播放

格式检测功能 (Format Detection Function)

Modernizr includes a small function to detect video format support; I've taken a moment to take that logic and create my own function for general purpose use without Modernizr:

Modernizr包含一个检测视频格式支持的小功能 ； 我花了一点时间来理解这种逻辑，并在没有Modernizr的情况下创建自己的通用函数：

function supportsVideoType(type) {
  let video;

  // Allow user to create shortcuts, i.e. just "webm"
  let formats = {
    ogg: 'video/ogg; codecs="theora"',
    h264: 'video/mp4; codecs="avc1.42E01E"',
    webm: 'video/webm; codecs="vp8, vorbis"',
    vp9: 'video/webm; codecs="vp9"',
    hls: 'application/x-mpegURL; codecs="avc1.42E01E"'
  };

  if(!video) {
    video = document.createElement('video')
  }

  return video.canPlayType(formats[type] || type);
}

// Usage
if(supportsVideoType('webm') === "probably") {
  // Set the video to webm
}
else {
  // Set the video to mpeg or mp4
}

I use feature detection function efficiency to only create one element and simply return the result if called more than once.  Using this function today, Chrome reports the following:

我使用特征检测功能效率仅创建一个元素，如果多次调用，则简单地返回结果。 Chrome今天使用此功能报告以下内容：

The canPlayType method allowed you to feature detect the best compression and supported formats and server them to your users, thus making the most of your browser capabilities.  Get aggressive with your media formats to make your site as quick as possible!

canPlayType方法使您能够检测最佳压缩和支持的格式，并将其提供给用户，从而充分利用浏览器的功能。 积极利用您的媒体格式，以使您的网站尽快！

翻译自: https://davidwalsh.name/detect-supported-video-formats-javascript