X
Tap here to go to the mobile version of the site.

Support Forum

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?

Posted

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

Additional System Details

Sites Affected

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

Installed Plug-ins

non

Application

  • User Agent: Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.133 Safari/534.16

More Information

Matt Brubeck 145 solutions 1390 answers

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

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
Matt Brubeck 145 solutions 1390 answers

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

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

Question owner

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>

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>

Question owner

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

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

Question owner

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?

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

Matt Brubeck 145 solutions 1390 answers

Helpful Reply

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?

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?

Question owner

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

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

Question owner

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

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

weak 1 solutions 1 answers

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.

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.
Matt Brubeck 145 solutions 1390 answers

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

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

Question owner

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.

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

Matt Brubeck 145 solutions 1390 answers

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:

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: * http://diveintohtml5.org/video.html#video-mime-types * https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media

Question owner

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

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

Matt Brubeck 145 solutions 1390 answers

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

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
daanvh 0 solutions 1 answers

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 :)

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