title: Is it possible to cache an entire HTML5 video using the Service Worker API for offline use?
body: <p>I have an offline app that caches all static resources.  Currently, only the first 15 seconds of video assets are cached.</p>
  
  <p>Below shows basic implementations of the <code>install</code> and <code>fetch</code> event listeners.</p>
  
  <p><strong>Service Worker:</strong></p>
  
  <pre><code>self.addEventListener('install', event =&gt; {
    event.waitUntil(
      caches.open('v1').then(cache =&gt; {
        return cache.addAll([
          '/',
          '/videos/one.mp4',
          '/videos/two.mp4'
        ]);
      })
    );
  });
  
  self.addEventListener('fetch', event =&gt; {
    event.respondWith(
      caches.match(event.request).then(response =&gt; {
        if (response) return response;
        return fetch(event.request);
      });
    );
  });
  </code></pre>
  
  <p>And in <code>index.html</code></p>
  
  <pre><code>&lt;video controls preload&gt;
    &lt;source src="/videos/one.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>