Question

我是网站开发的新手。

我使用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>

这很好用。

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

所以我想问一下是否有任何方法可以避免重新加载视频，例如将视频保存到浏览器缓存中。

谢谢。

索引页面中的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>

Answer 1

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

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

您可以选择使用哪些标头。常见的是Expires或Cache-Control max-age，Etag和Last-Modified。我不会深入解释它们 - 有很多文章都是这样做的 - 但是Etag和Last-Modified更复杂但让访问者的浏览器检测到你的视频文件发生了变化，而Expires和Cache-Control max-age是基于时间的。

在所有这些中，我推荐Expires。它在HTTP中的存在时间最长（从1.0开始），并且它是最简单的。

示例：

到期日：星期五，08年1月8日02:32:53 GMT

但是，如果您希望某天视频可能会发生变化，并且您不希望使用其他文件名来确保新视频显示，那么使用ETag或Last-Modified可能是合适的。

浏览器缓存中的html视频

1 个答案: