页面要依据不同的状态播放不同的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