HTML video元素 视频预加载 全量加载

当我们有需求需要让video标签预加载的时候，您可能会使用 video 标签的 preload 属性来提示浏览器预加载的信息或内容量。
preload="auto"表示浏览器将缓存整个视频，无需暂停缓冲，可以支持完整播放。

虽然它是 w3c 提供的API，但是它有很多限制。比如：
1.在使用流量访问时，此属性就会被忽略。
2.虽然设置了preload="auto"，但是浏览器还是会分片加载视频，而不是全量预加载。

在网络状况不是很理想的时候（预加载速度跟不上观看进度时），就会卡顿。

这个方法就可以解决上面说说的第二种情况限制：视频必须设置“muted”静音属性。
思路：
1.页面加载完成后，video滚动到视口前（用户还没看到时），用js触发播放。
2.video滚动到视口时，停止播放并将进度回调为0。

const videoElem = document.querySelector('#video');
videoElem.addEventListener('loadedmetadata', () => {
	$(videoElem).trigger('play');

	if ('滚动到合适的位置，自行判定') {
		$(videoElem).trigger('pause');
		videoElem.currentTime = 0;
	}
});

这样就可以让用户体验好很多了。在利用视频做一些效果的时候特别有用。
目前我就想到这一个解决方案，路子比较野，大家如果有更好的方法可以交流一下。