Why Does FireFox Play in SD with Webm Format on my Website?

[jamiesea]

I have a website with embedded video in a Joomla module. Both Chrome and IE play it back in HD but FireFox plays it back in SD.

The media files that the browsers draw on are as follows:

1. MP4

2. OGC

3. WEBM

If I disable the Webm file then Firefox plays fine, however in Vietnam where my web design company is out of, without the Webm vid their FireFox is almost at a standstill. Very slow and freezes.

With the Webm vid enable they see if fine in HD but not in the USA that I can see.

What could possibly be the problem?

You can check out my website and see how it looks for you a jamiesea.com The vid is located on the home page about 1/2 way down. The site is still under construction.

Any tips would be most appreciated.

Thanks!

Jamie

[therube]

(I'm on XP, at the moment, so mp4 won't play. webm looks to be 404? ogv plays but eats my lowly computer up .
Oh, & this is with attempting to open the links directly, not through the web page/player.)

[patrickjdempsey]

Without actually seeing the site it's really hard to say for sure. However, there are some generalities we can discuss.

1. MP4 (h264): Firefox cannot directly play h264 content, so it defers to the OS codec. Windows XP and some older versions of OSX do not have those codecs and will not play h264 content at all. That is the typical reason Firefox will switch over to WebM. In some cases, even machines that can play h264, the experience will not be very good. People with slower processors and fewer system resources on their machines will (in my personal experience) have a much worse playback than if the content was distributed via Flash. On two different machines I run, Flash videos run smoothly while h264 videos are horribly slow and choppy... part of that is because Flash is smart enough to automatically switch to lower-quality versions right in mid-stream if it detects connection problems or not enough resources on the user machine. I don't think Firefox (or any browser?) offers a way to automatically switch to lower-quality but you can offer a button to select SD quality for users who cannot stream HD. Also note that because Firefox has one process, forcing HD video on users can cause the entire browser to lock up. It's not pleasant, and when I encounter a site that doesn't have an option to view lower-quality video, I tend to not go back to that website.

2. OGG: The lowest quality format. Since there aren't any browsers that support OGG and not one of the other formats (except very very old versions of Firefox) I don't really see any reason to bother with it. See: https://en.wikipedia.org/wiki/HTML5_vid ... er_support

3. WebM: As mentioned above, WebM is the fallback format for Firefox. It is lower quality than H264 but renders directly in the browser. So yes, for users who cannot view h264/MP4 content, they will have a lower quality experience. Which as I've mentioned, may actually be preferential to a locked up browser.

[jscher2000]

I can't load the page. Once I enable scripts (by default, NoScript blocks them), the video appears to fill the entire frame for a couple seconds, then it all goes black, fan comes up, CPU at 23%+ and I have to kill the window.

[LoudNoise]

Moving to web development

[patrickjdempsey]

I didn't see the website address before sorry.

Over here, I haven't played the video content yet, but just the background "slideshow" is a BIG problem. You can't just load up a dozen images that are over a Megabyte and then animate them across the screen. Maybe that works on *your* computer, but it surely doesn't work on mine. Heck, most of the images don't even load for me but I'm guessing as more of them load, performance gets slower and slower. Memory use on my machine skyrocketed to over a gig just trying to load those backgrounds. I can only imagine trying to load the videos over top of those backgrounds is going to cause crashes and all kinds of problems for people.

It is possible to do that kind of background, but it takes a lot of work on the image processing end... basically you use really blurry atmospheric images and apply a ton of carefully-worked compression to get the images as small (filesize) as possible and then you use tricks like horizontal and vertical flip so you can re-use the same image. Even then, it's risky to try to run video over top of that because the CSS transform and animation stuff is very very processor intensive.

[jamiesea]

I didn't see the website address before sorry.

Over here, I haven't played the video content yet, but just the background "slideshow" is a BIG problem. You can't just load up a dozen images that are over a Megabyte and then animate them across the screen. Maybe that works on *your* computer, but it surely doesn't work on mine. Heck, most of the images don't even load for me but I'm guessing as more of them load, performance gets slower and slower. Memory use on my machine skyrocketed to over a gig just trying to load those backgrounds. I can only imagine trying to load the videos over top of those backgrounds is going to cause crashes and all kinds of problems for people.

It is possible to do that kind of background, but it takes a lot of work on the image processing end... basically you use really blurry atmospheric images and apply a ton of carefully-worked compression to get the images as small (filesize) as possible and then you use tricks like horizontal and vertical flip so you can re-use the same image. Even then, it's risky to try to run video over top of that because the CSS transform and animation stuff is very very processor intensive.

The slideshow will not have video on it. Tried that and was too much to process. The Slider is Unite revolution Slider and so far everyone testing says it works fine.

The Slide Shows also works fine for mobile devices like my iPhone, but it can take like 15 secs or so to load on my iPhone. So maybe if I reduce the images to like 500kb or so it will be faster. As long as I don't lose quality.
I'll give that a go.

The video embedded below is now working with FireFox. I had to render it in Adobe Premier and it fixed the issues I had using their Webm formatting.

BTW - Chrome to me is faster than FireFox and uses like 1/2 the memory on my computer.

[jamiesea]

I didn't see the website address before sorry.

Over here, I haven't played the video content yet, but just the background "slideshow" is a BIG problem. You can't just load up a dozen images that are over a Megabyte and then animate them across the screen. Maybe that works on *your* computer, but it surely doesn't work on mine. Heck, most of the images don't even load for me but I'm guessing as more of them load, performance gets slower and slower. Memory use on my machine skyrocketed to over a gig just trying to load those backgrounds. I can only imagine trying to load the videos over top of those backgrounds is going to cause crashes and all kinds of problems for people.

It is possible to do that kind of background, but it takes a lot of work on the image processing end... basically you use really blurry atmospheric images and apply a ton of carefully-worked compression to get the images as small (filesize) as possible and then you use tricks like horizontal and vertical flip so you can re-use the same image. Even then, it's risky to try to run video over top of that because the CSS transform and animation stuff is very very processor intensive.

BTW - What OS are you running and how fast is your processor/s? Also, how fast is your internet connect?

Trying to do some testings on different systems. Also try Google Chrome and see if it loads faster.

I'm going to reduce the size of the pics on the slide show. I don't mind smaller as long as the quality is not degraded.