Display <video> fallback message for unsupported file formats?

Question

I am using video element on my page in the following way:

      <video src="some source" controls>
        Error message
      </video>

To my understanding "Error message" will only display if browser doesn't support <video> element. I wanted to see if there is a way to show it or at least replicate this behaviour also if browse doesn't support video format provided in src.

Answer 1

You can do it via JavaScript as you can use the canPlayType() method to check if the browser can play the video file format.

For example:

var v = document.createElement('video');
// canPlayType returns maybe, probably, or an empty string.
if (v.canPlayType('video/mp4') === '') {
   // boo the browser cannot play an MP4 file
}