How can I precisely detect HLS support on different browsers and different OS?

Question

According to this answer, to test the browser\'s capabilities to play HLS video, the MIME application/x-mpegURL can be used. But the problem with this approach

Answer 1

JavaScript version

function supportsHLS() {
  var video = document.createElement('video');
  return Boolean(video.canPlayType('application/vnd.apple.mpegURL') || video.canPlayType('audio/mpegurl'))
}

Then use it as:

if (supportsHLS()) {
  myVideoElement.src = 'your-hls-url.m3u8';
} else {
  myVideoElement.src = 'your-plain-video-url.mp4';
}

HTML-only version (preferred)

Let the browser pick the first source it supports. This is safer.