Html video in browser cache

Question

I am new to website development.

I used the html5 tag to insert a fullscreen video as the background of the website.

<div class="fullscreen-bg"> <video autoplay preload="auto" class="fullscreen-bg__video"> <source src='media/test.mp4' type="video/mp4"> video not supported </video> </div> 

This works great.

However, when I go from the home page to other pages. The background will flash once (I think it reloads the video element) and shows the contents.

So, I want to ask if there is a way to avoid reloading the video, for example, save the video in the browser cache.

Thanks.

The body tag on the index page is simple as shown below

 <div class="menu-wrap"> <nav class="menu"> <ul class="clearfix"> <li class="current-item"><a href="#">Home</a></li> <li> <a href="#">Photography</a> <ul class="sub-menu"> <li><a href="#">Gallery</a></li> <li><a href="#">Artists</a></li> </ul> </li> <li> <a href="#">Computer Vision</a> <ul class= "sub-menu"> <li><a href="projects">Project</a> </li> </ul> </li> <li><a href="#">Photos</a></li> <li><a href="#">Site Help</a></li> </ul> </nav> </div> <div class="fullscreen-bg"> <video autoplay preload="auto" class="fullscreen-bg__video"> <source src='media/test.mp4' type="video/mp4"> video not supported </video> </div> 

Answer 1

Browser caching behavior is controlled by certain headers in the HTTP response that this element conveys.

So, in order to change the caching behavior of your visitors' browsers, you need to configure the server to deliver certain HTTP headers along with MP4 when it is requested.

You have several options for using headers. Common are Expires or Cache-Control max-age, Etag and Last-Modified. I will not explain them in detail - there are many articles that do this, but Etag and Last-Modified are more complex, but let the visitor’s browser detect when your video has changed, and Maxess and Expires and Cache-Control are time-based.

Of all this, I recommend Expires. It has been the longest in HTTP (since 1.0), and it is the simplest.

Example:

Expires: Fri, 08 Jan 2020 02:32:53 GMT

However, if you expect your video to someday change, and you do not want to use a different file name to ensure that a new video appears, then using ETag or Last-Modified may be appropriate.