浏览器缓存中的html视频

Mix 发表于 Dev

混合

我是网站开发的新手。

我使用html5视频标记插入了全屏视频作为网站背景。

<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>

这很好。

但是，当我从主页跳到其他页面时。背景将闪烁一次（我想它会重新加载video元素）并显示内容。

因此，我想问问有什么方法可以避免重新加载视频，例如将视频保存到浏览器缓存中。

谢谢你。

索引页面中的body标签很简单，如下所示

<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>

Umopepisdn

浏览器的缓存行为由传递项目的HTTP响应上的某些标头控制。

因此，要更改访问者浏览器的缓存行为，您需要将服务器配置为在请求MP4的同时提供特定的HTTP标头和MP4。

您可以选择几个标题。常见的是Expires或Cache-Control max-age，Etag和Last-Modified。我不会深入解释它们-很多文章都这样做-但是Etag和Last-Modified更为复杂，但是让访问者的浏览器可以检测到您的视频文件何时更改，而Expires和Cache-Control max-age是基于时间的。

在所有这些中，我建议使用Expires。它是HTTP中最长的版本（从1.0开始），并且是最简单的。

例子：