Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

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?

  • 15 replies
  • 60 have this problem
  • 1 view
  • Last reply by daanvh

more options

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:

http://videojs.com/

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?

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: http://videojs.com/ 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 👍 5

All Replies (15)

more options

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

more options

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

more options

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>

more options

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

more options

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

more options

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?

more options

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

more options

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

http://burgerweb.com/test/tsts/iworld/testvid.html

Modified by newbi462

more options

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.

more options

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

more options

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

more options

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:

more options

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

more options

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:

https://github.com/zencoder/video-js/pull/64

more options

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