I’m simply trying to have a fullscreen video that fits the browser window and automatically plays when the page loads. To do this I used https://github.com/georgepaterson/jquery-videobackground which is great. However, I can’t understand why I can’t get it to function in Firefox and I’m hoping someone can point out an obvious reason as to why it isn’t working.
Also, a secondary problem is a little jump as it loads on other browsers. Is that due to a problem with my poster image? Is 25mb too large for the video file?
If you view your page in FireFox using Firebug’s console, you see the following:
Specified "type" attribute of "video/mp4" is not supported. Load of media resource video/palms2.mp4 failed.
HTTP "Content-Type" of "text/plain" is not supported. Load of media resource http://palmsofpalms.com/video/palms2.webm failed.
HTTP "Content-Type" of "text/plain" is not supported. Load of media resource http://palmsofpalms.com/video/palms2.ogv failed.
All candidate resources failed to load. Media load paused.
What this translates to, is that FF tried to play “palms2.mp4”, but couldn’t, as it doesn’t support mp4.
It then tried to play ‘palms2.webm’ and ‘palms2.ogv’, but couldn’t, as the file is being sent as text/plain by the server.
To get this to work, you need to configure the server to send the file with a supported MIME type.
Try creating a “.htaccess” file and adding the following lines to it:
Then upload the “.htaccess” file to the root of your site.
Tip: Windows won’t let file names start with a dot, so if you are on this platform you will have to create a file called htaccess.txt, add the code above, upload the file, then rename it to “.htaccess” on the server.