Solution for Firefox’s “No Video with Supported Format and MIME Type Found” Error

"No video with supported format and MIME type found."

Have you ever received the above error message in Firefox when you opened a website with a video on it? Are you getting this error while preparing your web page on which you want to display a video? If your answer is yes, then you may want to continue reading as this tutorial will explain what causes this issue and how to solve it.

If you read the error message that is displayed on a gray background at the video's position on your page, you will understand that the video file format and MIME type that is used for the video are not supported by Firefox. What this means is that unless you add the video in the correct file format, it won't be displayed. As you see, this is not an HTML, CSS or JavaScript related problem with your website; it is a problem with Firefox not being able to display the provided video file. I'm saying it's a problem with Firefox, because right at this time, when I open the same page with Chrome browser, the video displays just fine.

Let's first briefly see how we add a video on a web page and then continue with the solution.

How a Video is Displayed on an Web Page

In order to add a video to a web page, we use the <video> element that was introduced with HTML5 like the following:

<video width="480" height="320" controls>
  <source src="video.mp4" type="video/mp4">
</video>

In the above code, we specified the width and height values of the video element with the width and height attributes of the video element. We specified the video file within the <source> tag using the src attribute for the video file location, and type attribute for the video file type.

If you have an MP4 video file, you can try the above code in your page and see how Firefox will display the error we mentioned above. Note that, in some cases the display issue may be caused not by the video file extension but its actual encoding and compression, which may result in a different MIME type. For example, you may have two different video files of the same extension and browsers may display one of them fine whereas they may have issues displaying the other one.

How to Solve: "No Video with Supported Format and MIME Type Found”

The HTML video element we used for displaying the video on your page accepts multiple video files (hence file types) to be specified using the source tag. By using multiple source tags inside the <video> element, you can link to more than one video files, i.e. the same video in different formats.

There are currently three video file formats that are supported in HTML, which are MP4 (video/mp4), Ogg (video/ogg), WebM (video/webm). By using multiple video files with different formats like the following, you increase the chances of your video to be displayed on not only Firefox but also on other browsers:

<video width="480" height="320" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <source src="video.webm" type="video/webm">
</video>

Usually, it will be enough to use two video formats (MP4 and Ogg or MP4 and webm) depending on the range of devices and browsers you wish to support.

You can check the browser support for video element here. If you click the Sub-features tab at the bottom, you can see which browsers support which video file formats.

If after implementing the above solution, you are still getting the same error, simply uninstall Firefox completely by also removing all the addons, and then re-install it.

ALSO CHECK: You may also find the following tutorials helpful for adding videos on your website:

CSS Full Screen Video Background

f t g+ in