[html] Playing MP4 files in Firefox using HTML5 video

I have searched around quite a bit but have not solved my problem.

I have a video tag running as follows:

<video 
  class="ne" 
  src="{{ page | video_url }}" 
  muted="true" 
  volume="0"  
  controls 
  width="720" 
  height="480" 
  poster="{{ page | video_poster_image_url }}" 
  type="video/mp4">
</video>

I am using Jekyll for the URLs. They work fine.

The site is live at switzerlandllc.com. Click any video in FF and it shows an image and an X. Chrome and other browsers work fine.

If you grab the source of a video and load it in a new tab it plays fine. At least it does for me.

I have added:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

to my htaccess file. I suspect that I don't need the .ogv or .webm.

I don't understand why loading the video URL will play the videos fine but loading the video into a video tag fails.

Any ideas?

This question is related to html firefox html5-video mp4

The answer is


This is caused by the limited support for the MP4 format within the video tag in Firefox. Support was not added until Firefox 21, and it is still limited to Windows 7 and above. The main reason for the limited support revolves around the royalty fee attached to the mp4 format.

Check out Supported media formats and Media formats supported by the audio and video elements directly from the Mozilla crew or the following blog post for more information:

http://pauljacobson.org/2010/01/22/2010122firefox-and-its-limited-html-5-video-support-html/


I can confirm that mp4 just will not work in the video tag. No matter how much you try to mess with the type tag and the codec and the mime types from the server.

Crazy, because for the same exact video, on the same test page, the old embed tag for an mp4 works just fine in firefox. I spent all yesterday messing with this. Firefox is like IE all of a sudden, hours and hours of time, not billable. Yay.

Speaking of IE, it fails FAR MORE gracefully on this. When it can't match up the format it falls to the content between the tags, so it is possible to just put video around object around embed and everything works great. Firefox, nope, despite failing, it puts up the poster image (greyed out so that isn't even useful as a fallback) with an error message smack in the middle. So now the options are put in browser recognition code (meaning we've gained nothing on embedding videos in the last ten years) or ditch html5.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to firefox

Drag and drop menuitems Class has been compiled by a more recent version of the Java Environment Only on Firefox "Loading failed for the <script> with source" Selenium using Python - Geckodriver executable needs to be in PATH Selenium using Java - The path to the driver executable must be set by the webdriver.gecko.driver system property How to use the gecko executable with Selenium Selenium 2.53 not working on Firefox 47 Postman addon's like in firefox Edit and replay XHR chrome/firefox etc? How to enable CORS on Firefox?

Examples related to html5-video

How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66? In Chrome 55, prevent showing Download button for HTML 5 video HTML 5 Video "autoplay" not automatically starting in CHROME How to open .mov format video in HTML video Tag? What is a blob URL and why it is used? .mp4 file not playing in chrome HTML5 video won't play in Chrome only use video as background for div HTML5 Video tag not working in Safari , iPhone and iPad Video 100% width and height

Examples related to mp4

Bootstrap 3 - Responsive mp4-video How to play .mp4 video in videoview in android? Playing MP4 files in Firefox using HTML5 video Use ffmpeg to add text subtitles How to concatenate two MP4 files using FFmpeg? Can I have a video with transparent background using HTML5 video tag? How do I embed a mp4 movie into my html?