Fetch API的Request属性cache

页面要依据不同的状态播放不同的mp4文件，代码实现直接video.src加载不同的mp4文件。

$('.vid').attr('src','/static/room/img/3.mp4')

问题：发现每次加载mp4文件都是从服务端下载。显然影响前端性能。网上有人建议用Fetch API下载完整的视频，然后将其传输到视频标签中。确实解决了问题。只有第一加载的时候从服务端下载mp4，以后都是从浏览器缓存获取。

fetch("/path/video.mp4")
    .then(response => response.blob())
    .then(blob => {
        $("#video").src = window.URL.createObjectURL(blob);
    }); 

 究其原因就是fetch api的Request请求中有个cache属性，它的默认值是default，也就是默认从浏览器在HTTP缓存中查找。当然还有其他值，如no-store、reload、no-cache、force-cache、only-if-cached。具体FetchAPI可以参考Request属性：cache_w3cschool