html5 video 标签如何缓存

Question

<video 
    controls 
    width="250"
    preload="auto"
>
    <source
        src="/public/69b0710b41ba4b3ade2c.mov" 
        type="video/webm"
    >
        Sorry, your browser doesn't support embedded videos.
</video>

案例：
当我在页面中完整看完一段视频，然后手动断开网络，重新播放会发现视频无法播放，如果有用到缓存应该是可以播放的

造成的问题：
重复播放同一视频的时候浪费流量

测试：
通过 chrome 的 netwwork 发现并没有(disk cache)用到缓存 即每次播放都重新请求了数据

如何解决这一问题？

Answer 1

标签本身无法缓存，你需要自己在服务器响应中加上缓存头，如果服务器不受你控制，你无法对服务端配置做出修改，那么可以考虑使用service worker的缓存功能。具体可以看我的文章，重点关注缓存部分: https://blog.dteam.top/posts/...

Answer 2

video这里数据，默认是浏览器自动处理缓存，是可以缓存较少一部分内容的，但想完整缓存，需要额外的处理。