web development: using background video is blocking firefox - firefox

i'm developing a website which is using a background video for the home page.
that video has pretty small filesize (about ~300 kb) and the problem is that it is kinda blocking firefox - which means when clicking a link to a different page, it takes about 10 seconds until firefox will start loading it. i've checked the taskmanager, plugincontainer.exe is eating ~26% cpu on my machine.
any ideas how to optimize this?

I googled optimising video backgrounds, and it gave me this page, it talks about streaming videos and how to optimise it, its essentially what will be causing the problem I would assume.
http://www.reelseo.com/streaming-video-optimization/

Related

Page stops loading before all image/files are done

I recently got a new Windows 2016 machine and Lucee (ColdFusion). Transferring all my clients e-Commerce sites from Windows 2008 CF9. I am having an issue with all images downloading to the browser. The images are a bit to large, client not following directions, BUT this was not an issue with the old machine. If you go to https://shop.bosombuddybags.com/p824/HBB-Custom-Monogram.htm for the first time many of the option images do not load/transfer but the page has stop loading. They are all there, refresh a few times and they appear use CNTRL F5 and they disappear again randomly. I have spent 2 days looking through Google searches, and getting no where. Any suggestions are welcome as this clients had over 1200 options uploaded and having them redo them to make proper thumbs is not an option. I figure it has to be a Lucee or Windows 2016 setting that I am missing. As the page stops loading and never loads what ever images were not completed.
Here are the recommendations:
You have got about 3 or 4 images that are just enormous. Get those down to size.
Try turning data compression on IIS for static content.
Try doing some inline images
Try eliminating some images. Both Font-Awesome and Glyphicons have Facebook and Twitter. You can use them.
Otherwise this is a really show page.

Chrome/Safari Mobile - Images are being resized & compressed and look terrible

I am encountering an issue I have never seen before. During development of a new website, while testing on mobile I noticed my images are getting resized and compressed. An image that is normally 1600 by 600 naturally, is being resized and compressed to 375 by 140 this is then displayed as the natural size.
I have an older copy of the website with the same images. The issue does not occur with those.I have not implemented any server side caching yet.
Is anyone familiar with this issue? I haven't been able to find any information on it. I looked up 'Image compression bug on chrome', 'chrome resizing images', and at least a dozen other queries, but nothing that seemed to match my issue. Other colleagues are seeing the same issue on their own devices as well.
Nevermind. It turns out one of my colleagues in the past had run a small experiment with cookies and limiting the image widths, and had left it there.

AS3 | FPS issue while running on browser

I've built a small game that running perfectly while on local (from Flash). It's a small 60-fps game. Using the same computer, I'm playing the swf using a browser (Chrome, Firefox, Explorer) however it's running extremely slow. I'm using swf monitor (and Browser monitor) there you can see clearly the swf is running with 61/60 fps however this is just not true. Seem like the browser is forcing swf fps down to around the 20 fps or so. I've also tried Wmode (direct / GPU) but nothing. What is going on?
After updating my graphic card drivers, everything works perfectly even on Browser. Flash can handle it perfectly without updated drivers, but on a browser it's a must to have, else it will damage application performance and FPS.

Why does youtube video work fast on Chrome than firefox?

As a java UI & Backend developer for past 10 years, What surprises me is the following browser behavior :
Firefox : I click on a related video (youtube website) and it takes some time to figure out the video and then buffering starts for the video.
Chrome : I click on a related video (youtube website) and it starts as if it was already buffering or buffer ready. This is surprising as there is no delay.
(note: If you have a very fast connection, you may not notice it. Slow it down by some parallel network related activity and then experiment)
My Concern is : Is Chrome browser programmed to preload some data related to youtube related videos to give a faster experience?
Google owns youtube and it makes sense for doing so.
But doing so,seems weird. Its like unusual customization for a particular website from a sea of websites.
Anyone knows a thing or two about it?
I noticed that when you install firefox you have to install flash manually, while chrome does not require that, i think it comes with it, or does not use flash at all. It might have something to do with that..

Preventing Mobile Safari Cache Overflow

I've got a simple little web app that's aggregating a couple views from some ethernet enabled cameras around my house. This is basically a little dashboard, so that I can easily tell what's going on around the house. I've got it refreshing the images every so often by appending new Date().getTime() to the base URI.
Everything works happy days, except for one little issue. If I leave the dashboard up on my iPad for awhile, it runs out of memory and crashes back to the home screen. I know that its because Mobile Safari is caching each of these images in RAM and it eventually ends up with far too many of them.
Since these images are being hosted on embedded devices; I really have no ability to modify the caching headers directly. I would like to stay away from making a wrapper on my server side as well.
My question is; can anyone think of a way to prevent Mobile Safari from caching these images so aggressively that it crashes?
You might try to reuse your img tags and/or set the src attribute to an empty string before removing an image. It's probably not an aggressive cache that's crashing mobile safari, but how the browser doesn't deal well with releasing image references when image tags get deleted.
You might find more useful information here:
http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/

Resources