Many webM videos I try and load show grey box and X instead of the video what code tweak needs to be made to make FF mobile happy?
Ok have no clue why but more often than not FF mobile wont play WebM html 5 Video
I know it can play WebM video as evident bu the fact it will play this Web M live demo
http://zaheer.merali.org/webm/
but when you go to sites like:
all you get is a box with an X an it is that way on all of my sites to even if I only use the video tag only aside from the lack of costume controls and diffident size and URL the code I am using is identical to the ones that work
The files are 600k WebM but no buffering no nothing just a big X where the video should be. I am glad to see FF Mobile lets the video play where site designers want it when it works as it will let me get the pages to work rignt unlike Chrome Mobile that trys to open the video independent of the page but need consistency.
Right now no rime or reasion as to why some WebM will work and others are a gray X.
Hopefully some one has a clue how to fix the vids so it works
code is a s follows, opening < replaced with // so code would show:
//video id="videolayer" controls width="720px" height="480px" >
//source src="untitled.webm" type='video/webm; codecs="vorbis,vp8"' />
///video>
The problem is also on Desktop FF, so it seam there is something wrong with FF over all WebM support
...
I have also tried the webM demo file from
http://www.webmfiles.org/demo-files/
And loaded that file and FireFox 4 can not play it.
FF4 is clearly looking for a very narrow WebM vp8 file format is there some documentation some were about what FF4 considers a good WebM that it will play vers a bad one most things render off?
Modified by newbi462
Chosen solution
The problem is caused by your web-server configuration, not the video files.
You have to add the MIME type to your server configuration. For example if you're using Apache, add the following to your httpd.conf:
AddType video/webm .webm
Then it should work with FF4 as well.
Read this answer in context 👍 5All Replies (15)
This might be related to: https://bugzilla.mozilla.org/show_bug.cgi?id=638118
Is the problem fixed if you add preload="metadata" to your video tag?
There's some more information about this issue here: https://bugzilla.mozilla.org/show_bug.cgi?id=640864
Ah, it looks like the VideoJS site incorrectly thinks that Firefox for Android is the same as the built-in WebKit browser for Android, and serves it the wrong format: https://bugzilla.mozilla.org/show_bug.cgi?id=631873
no "preload="metadata" " do not fix this problem and if auto play is enabled preload is ignored so preload mandated would cause an issue.
The code on the site is now
//video id="videolayer" preload="metadata" width="100%" height="100%" >
//source src="untitled.webm" type='video/webm; codecs="vorbis,vp8"' />
///video>
Well that would explain videojs.com but my sites are not using that player only the video tag as follows:
//video id="videolayer" preload="metadata" width="100%" height="100%" >
//source src="untitled.webm" type='video/webm; codecs="vorbis,vp8"' />
///video>
I have replaced the leading "<" with "//" so the code will show in the post but just the video tag and a WebM file, not sure why FF4 wont use it but it wont play the files. They play fine everywhere else WebM is supported so that brings it back to something with FireFox4
I think it has something to do with the WebM File for some reason FF is picky about what kind of Web M file it will support
the particulars of the File FF wont play are
acodec=libvorbis ab=128k ar=44100 vcodec=libvpx minrate=0 b=600k aspect=%dar maxrate=1800k g=120 qmax=42 qmin=10 threads=2
I have also tried the webM demo file from
http://www.webmfiles.org/demo-files/
And loaded that file and FireFox 4 can not play it.
FF4 is clearly looking for a very narrow WebM vp8 file format is there some documentation some were about what FF4 considers a good WebM that it will play vers a bad one most things render off?
Modified by newbi462
Are you having this problem in both mobile and desktop Firefox, or in mobile Firefox only? (Except for the "preload" issue, the WebM code should be identical.)
This file plays correctly for me in Firefox 4 for both Android and desktop, when I save it locally and then open it in the browser: http://www.webmfiles.org/wp-content/uploads/video/big-buck-bunny_trailer.webm
Is your file served with the correct MIME type in the Content-type header?
Not playing on either
"correct MIME type in the Content-type header?"
what do you mean by this have the code as I showed you
do you mean the part where it says
type='video/webm; codecs="vorbis,vp8"' for the source tag?
the code is
//video id="videolayer" controls autoplay width="100%" height="100%" >
//source src="big-buck-bunny_trailer.webm" type='video/webm; codecs="vorbis,vp8"' />
///video>
according to http://www.w3schools.com/html5/att_source_type.asp that is the right type for WebM. Did you try and play the file embedded in a video tag or just as a file? this problem has to do with FF wont play many WebM when they are embedded, which is kind of the whole point to be able to embed the video
Modified by newbi462
def the video
This will run:
//video id="videolayer" width="100%" height="100%" controls="controls" preload="metadata" >
//source src="http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_Jess3Features_VO_1.webm" type="video/webm" />
///video>
But not this:
//video id="videolayer" width="100%" height="100%" controls="controls" preload="metadata" >
//source src="http://www.webmfiles.org/wp-content/uploads/video/big-buck-bunny_trailer.webm
" type="video/webm" /> ///video>
Only change is what video yet one works and the other wont. Really hope we can track down that the issue is because this honestly makes no sense to me
go here and see for your self
Modified by newbi462
Chosen Solution
The problem is caused by your web-server configuration, not the video files.
You have to add the MIME type to your server configuration. For example if you're using Apache, add the following to your httpd.conf:
AddType video/webm .webm
Then it should work with FF4 as well.
Yes, it looks like the web server is not using the correct MIME type. Using Firebug to inspect the response headers from the server, I see that webmfiles.org sends this incorrect header: "Content-Type: text/plain".
Fixing the server configuration should fix the problem. UPDATE: For example, the exact same file on a different web server works correctly: http://people.mozilla.com/~mbrubeck/big-buck-bunny_trailer.webm
Modified by Matt Brubeck
OK
what do you suggest changing in the line
//meta http-equiv="Content-Type" content="text/html/video/webm.webm; charset=UTF-8" />
in the header to to make FireFox happy? I tried commenting it out but no good so need to manulay specify it for FireFox, but what value is FireFox looking for to make it happy? added the video/webm .webm but still no good?
..
OK now that I re read your post I see you were talking about changing the httpd.conf file. Um is there a way to make this change via .htaccess instead. Don't have root control of this box. \ Your file on your server works but need to be able make firefox happy with files on our sites but I am not even seeing a Content-Type line in the mozilla page header. Need to make this specification in the page header but it seems am over looking something here that FireFox is needing.
Modified by newbi462
The "Content-type" line is part of the HTTP headers sent by the web server, not part of the HTML file. One of the comments above explained how to add the correct Content-type to your web server if you are running Apache.
For more detailed instructions, see these links:
OK see from the link you provided you can add the type to the .htaccess and that fixed it. I actually missed that you said to add it to the config file. But at least it is working now and know how to address it for FireFox
Thank you for the help
Modified by newbi462
You're welcome! I'm glad it's working. By the way (in case anyone else runs into similar issues), I submitted a patch to the VideoJS library to fix playback in Firefox for Android:
Future readers, please note that you can also apply this rule to your .htaccess file located in your movie directory.
Edit: ah, that was already posted :)
Modified by daanvh