瀏覽器緩存中的html視頻

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> 

這工作正常。

但是，當我從主頁跳到其他頁面。 背景會閃爍一次（我想它會重新加載視頻元素）並顯示內容。

所以我想問問有沒有什麼方法可以避免重新加載視頻，比如將視頻保存到瀏覽器緩存中。

謝謝。

在索引頁的正文標記是簡單如下

<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響應某些標頭控制行爲。

因此，要改變訪問者瀏覽器的緩存行爲，您需要配置服務器以在請求時將特定的HTTP標頭與MP4一起發送。

您有幾個選項可以使用哪些標題。常見的有Expires或Cache-Control max-age，Etag和Last-Modified。我不會深入解釋它們 - 有許多文章可以這樣做 - 但Etag和Last-Modified更復雜，但讓訪問者的瀏覽器檢測視頻文件何時發生變化，而Expires和Cache-Control max-age是基於時間的。

在所有這些，我建議過期。 HTTP是最長的（從1.0開始），並且是最簡單的。

例子：

過期：週五，2020年1月8日2點32分53秒GMT

但是，如果你希望你的視頻有一天會改變，你不希望有要使用不同的文件名以確保新視頻顯示，則使用ETag或Last-Modified可能是適當的。