How optimize background video on the web page in Chrome browser? - html

Now we are upgrading the landing page on our web site with a new popular design - with a video in the background, like here https://globalid.net/. But I've found that after 30-60 seconds of page preview, my laptop becomes so hot and system manager shows me that Chrome is getting about 50% CPU but it really does nothing, it's a plain one page with a small 30 seconds video fragment ~4.5 MB.
So, could anybody explain how to solve this problem? Why Chrome is so greedy for resources?
Thanks!
P.S.
After exploring other sites with the video on the landing page, i've found that all of them make system slow (30-100% CPU)
E.x.:
https://smartslider3.com/yoga-hero-block/
Video size 1.5 MB, 15 sec, 24 frame/s, 1920*1081
30-60% CPU
https://theenglishbus.com/
70-100% CPU
It seems it doesn't matter the size of the video, for Chrome it just endless "HD movie".

One solution is disabling 'loop' in the promo video, and after that in some way to check if it's happened and then just to show the slides.

Related

Video slow to load for no obvious reason

I am trying to figure out why my autoplay video takes so long to begin playing on mobile browsers. I have tried everything even going so far as to reduce it from 30mb to 3mb. I am aware of the mp4 'fast start' and 'web optimized' options that move the moov atom to the front of the file but I've encoded it with both Adobe and Handbrake and it still lags. My phone's internet speed is showing a test of 37mbps but a 3mb video is taking almost 10 secs (!) to start playing on both chrome and safari and no matter what I do. Any ideas?
It's because my hosting plan doesn't allow for video, I was unaware. I moved the videos to dropbox and changed the src and now they load faster.

HTML5 embedded video memory leak regardless of source or browser

I have been building a streaming chatroom page and started to notice during my stress tests that it would grind to a halt after about 30m - 1h, after isolating all my ajax scripts I finally narrowed it down to the actual video itself, and it seems to happen in both IE and Chrome, both youtube and ustream. Even just browsing to the embedded video URL thus removing my code from the equation completely shows the problems persistence. The problem even compounds when in video ads from ustream pop up as it eats a chunk of memory and does not seam to garbage collect. Any ideas, comments, suggestions?
I am on a fresh Win10 install with nothing but note plus plus and all the latest windows updates, and no not insider builds.

Animated GIF vs. HTML5 video performance in users' browsers

I need to display several items on a page that represent videos. Embedding video players (even just a couple) causes a ton of load on the user's CPU (you can hear your computer's fan spin up immediately to the maximum speed). My thought to mitigate this is to generate animated GIFs to represent clips of the videos. This seems to cause a load on the CPU but not nearly so great. It seems that once the GIFs have finished loading, the CPU load is less of an issue.
I'm only testing this by putting about 15 GIFs on a page, loading it up in Chrome on my MacBook Air and watching Activity Monitor.
http://yawmp.com/temp/anigif_test.php
Is my logic sound that Animated GIFs require much less CPU resources than embedded videos? Are there memory issues I should be concerned about? Are there any downsides to going this route in terms of system resource pain for my users?
If there are a few frames in the animated gif, the browser is just cycling through those frames - that isn't a particularly big deal. The memory issue would become a problem if you put enough of them on a page.
However, that is a lot of stuff moving, flickering and otherwise demanding attention. Maybe you could switch from a static preview image to the animated gif on mouse over so there is a bit less going on at once. Then if it interests them they can click through and load the video.

Issues with html5 video driven site

I have a website where upon loading, a 9 MB video autoplays. I also have it so that whenever a user clicks off the homepage using the navigation bar, a 2MB video plays before it ultimately goes to it's target destination. The issue is that while the 9MB video loads seamlessly, the 2 MB ones lag behind and the full video doesn't play before it goes to the other page. I even have it so that there is a delay before it switches to the other page via jQuery, so the video can finish.
Is the lag caused by the fact that the videos need to load fully and my ISP isn't fast enough, or is there a way to actually speed them up? I am fairly certain that the answer is the former, but I am just wanting to make sure.
http://www.brokenrecordsaustin.com/test/
Click on "Us" to see what I mean.

What is a reasonable file size for a 4 minute video on the web?

I am working on a site that will have a video on it. I am using HTML5 with a flash fallback and am hosting the video on the site (the client does not want to use Vimeo, YouTube, etc.). The video is a little over 4 minutes long and I have compressed the video down to 12.7MB for the mp4 format and around 23MB for webm and ogv. Are these file sizes too large? I can maybe get them smaller, but the quality really suffers. I also have the entire Adobe Creative Suite, so if someone has a good way to compress a video really well, while maintaing quality and a high resolution, I'm all ears!
Thanks!
That's pretty acceptable. Keep in mind that this four minute video will load fully in a little over 10 seconds on most consumer-level broadband connections.