浏览器缓存中的html视频 [英] html video in browser cache
问题描述
我使用html5视频标签插入全屏视频作为网站背景。
< div class =fullscreen-bg>
< video autoplay preload =autoclass =fullscreen-bg__video>
< source src ='media / test.mp4'type =video / mp4>
不支持的视频
< / video>
< / div>
这可以正常工作。
当我从主页跳到其他页面时。
背景会闪烁一次（我猜它会重新加载视频元素）并显示内容。
所以我想问问有没有什么方法可以避免重新加载视频，例如将视频保存到浏览器缓存中。
谢谢。
索引页如下所示：
< div class =menu-wrap>
< nav class =menu>
< ul class =clearfix>
< li class =current-item>< a href =＃>主页< / a>< / li>
< li>
< a href =＃>摄影< / a>
< ul class =sub-menu>
< li>< a href =＃>图库< / a>< / li>
< li>< a href =＃>艺术家< / a>< / li>
< / ul>
< / li>
< li>
< a href =＃>计算机视觉< / a>
< ul class =sub-menu>
< li>< a href =projects>专案< / a> < /锂>
< / ul>
< / li>
< li>< a href =＃>照片< / a>< / li>
< li>< a href =＃>网站帮助< / a>< / li>
< / ul>
< / nav>
< / div>
< div class =fullscreen-bg>
< video autoplay preload =autoclass =fullscreen-bg__video>
< source src ='media / test.mp4'type =video / mp4>
不支持的视频
< / video>
< / div>
浏览器对缓存的行为是由某些传递该项目的HTTP响应中的标头。因此，要更改访问者浏览器的缓存行为，需要配置服务器以在请求时随MP4一起传送特定的HTTP标头。
您可以选择使用哪些标题。常见的有Expires或Cache-Control max-age，Etag和Last-Modified。我不会深入解释它们 - 有许多文章可以这样做 - 但Etag和Last-Modified更复杂，但让访问者的浏览器检测视频文件何时发生变化，而Expires和Cache-Control max-age是基于时间的。
在所有这些中，我建议过期。 HTTP是最长的（从1.0开始），并且是最简单的。例如：
过期时间：周五，2020年1月08日02:32：
$ b53格林尼治标准时间
但是，如果您希望有一天您的视频可能会改变，并且您不想使用不同的文件名确保新视频显示，然后使用ETag或Last-Modified可能是适当的。
I'm newbie to website development.
I used html5 video tag to insert a full screen video as the website background.
<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 fine.
However, when I jump from the homepage to the other pages. The background will flash once (I guess it reloads the video element) and show the content.
So I want to ask is there any method to avoid the reload of the video, like save the video into browser cache.
Thank you.
The body tag in the index page is simple as following
<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>
A browser's behavior with respect to caching is controlled by certain headers on the HTTP response that delivers the item.
So, to change the caching behavior of your visitors' browsers, you'll need to configure your server to deliver specific HTTP headers along with the MP4 when it is requested.
You have a few options for which headers to use. The common ones are Expires or Cache-Control max-age, Etag and Last-Modified. I won't explain them in depth -- there are many articles that do that -- but Etag and Last-Modified are more complex but let the visitor's browser detect when your video file has changed, while Expires and Cache-Control max-age are time-based.
Of all these, I recommend Expires. It's been around in HTTP the longest(since 1.0), and it's the simplest.
Example:
Expires: Fri, 08 Jan 2020 02:32:53 GMT
However, if you expect your video might change someday, and you don't want to have to use a different filename to ensure the new video shows up, then using ETag or Last-Modified might be appropriate.
这篇关于浏览器缓存中的html视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
