Playing MP4 files in Firefox using HTML5 video

html firefox html5-video mp4
TJ Sherrill picture TJ Sherrill · May 7, 2012 · Viewed 104.2k times · Source

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?

Answer

Josh Mein picture Josh Mein · May 7, 2012

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/

Related questions

How to use VLC live streams with HTML5 video?

I tried HTTP Ogg/Theora and works alright with Chrome but not with Firefox 7. VLC Configuration: For testing, I've been streaming the desktop using the following vlc command line configuration: vlc.exe screen:// :screen-fps=30 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,…

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Using <meta> tags to turn off caching in all browsers?

I read that when you don't have access to the web server's headers you can turn off the cache using: <meta http-equiv="Cache-Control" content="no-store" /> But I also read that this doesn't work in some versions of IE. …

Read More