Search code examples
javascriptvideohttp-live-streaming

Chrome is wrongly detecting can it play HLS video media

I am trying to programatically find out whether some media will play or not based on it's URL.

Based on browser testing, HLS will play fine on my Chrome browser using the videoJs player video library, however CanIUse is saying it won't which is my first confusion.

enter image description here

I am then running it through this JavaScript...

using this npm package to get the mime-types

https://www.npmjs.com/package/mime-types

var mime = require('mime-types');

// get the extension of the file
var mimeType = mime.contentType(file.split('.').pop());

// returns 'application/vnd.apple.mpegurl'

var video = document.createElement('video');
console.log(Boolean(video.canPlayType(mimeType)));

Which returns false also, however it does play which is making me confused at how this is happening, does anyone have any ideas on why this is happening, or how I could correctly detect if the video will play or not?

Solution

  • The "Can I Use HLS" page lists the compatibility matrix for the HTML5 video tag, meaning that it checks if the browser has native support for that format. For example most desktop browsers except Safari on MacOS cannot play HLS natively.

    That's why for formats like Apple HLS and MPEG-DASH you need a JavaScript player which will transmux (repackage the streams without re-encoding) that specific format into one that the video element can process natively.

    Regarding codecs you might either go for the lowest common denominator like H.264 baseline with AAC, or provide different formats tailored to the targeted device with a fallback mechanism.