banner 728x90

Detect Supported Video Formats with JavaScript

In Mobile Web Development 90 views
banner 728x90
Detect Video Playback

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!

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:


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


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


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


There are three possible results from canPlayType:

  • "probably" : The media type appears to be playable
  • "maybe": Cannot tell if the media type is playable without playing it
  • "": 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:


function supportsVideoType(type) 

// Usage
if(supportsVideoType('webm') === "probably") 
else 


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:


Detect Video Playback


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!


banner 728x90
author
Author: 
    Build a user settings store with AWS AppSync
    Build a user settings store with AWS AppSync
    Amazon Cognito Sync is a service that
    Synchronize user settings for Android with AWS AppSync
    Synchronize user settings for Android with AWS AppSync
    Amazon Cognito Sync is a service that
    Script & Style Show: Episode 10: Dojo
    Script & Style Show: Episode 10: Dojo
    In this episode welcome David and Todd

    Leave a reply "Detect Supported Video Formats with JavaScript"

    Must read×

    Top