Video loop in Html5 making endless re-downloads. Overflowing bandwidth

Asked

Viewed 158 times

3

I am using a video as the background of the upper area of the site.

Identical to this site, using a <iframe> pointing to a video on Youtube.

The big problem that I noticed on all sites that use video like this is that the video does not cache and is doing endless re-downloads. We are having a headache with this, because users who have band limit franchise are being harmed by unnecessary downloads.

Just to get a sense a site with this open video feature for a few hours consumed 4GB download.

What can I do for the video to load only once, store in the cache and repeat without this need to re-download?

javascript html5 video

2 answers

3

Several approaches are at your disposal. Choose one (or several) of them.

  • Reduce the bitrate of the video in background. Use a Tiling Mask on video to reduce granulation effect.
  • Run the video for 5 minutes, then destroy the element and replace with a static image.
  • Convert the video to a format that might suffer caching local (mp4, for example) instead of a call to Youtube.

1

To avoid "infinite re-download" you can try to download the video and make it available on your server instead of using the traditional iframe with youtube content.

If you try to do this, I suggest you take a look at the plugin jQuery VIDE, that already does various treatments such as check display on mobile devices that do not support the function and replace by video-related banners, among other features.

https://github.com/VodkaBears/Vide

Browser other questions tagged javascript html5 video

You are not signed in. Login or sign up in order to post.