IE vs Chrome vs Safari video 的预加载表现分析

by Jack Pu

我们知道在 video 的标签中支持 preload的属性，
它表示可以 用于定义视频对于媒体资源的预加载从而达到更好的播放体验。它可以设置下面属性值：

  • auto 表示整个视频都会进行下载，即使用户并不打算播放它。
  • metadata 只请求视频信息的 metadata 数据，比如长度。
  • none 不停止视频资源预加载。

测试表现

Chrome

*版本： 61 *

我们测试Chrome设置为 auto 的时候加载数据大约为
(3.6M / 20.1M)

Preload Size
auto 3.6M / 20.1M
none 0 M / 20.1 M
metadata 896 KB / 20.1 M
Safari

版本： 11.0

Preload Size
auto 20.1M / 20.1M
none 0 M / 20.1 M
metadata 20.1M / 20.1 M
IE

版本: Edge

Preload Size
auto 2.61 M / 20.1M
none 220 KB / 20.1 M
metadata 121 KB / 20.1 M

版本: IE9

Preload Size
auto 2.61 M / 20.1M
none 105 KB / 20.1 M
metadata 177~ 288KB / 20.1 M 
数据是多次测量后的平均值

从上面测试的数据中可以发现，不同浏览器下对于设置 preload 的表现是完全不一致的，我们需要重视 safari 的设置，它是会进行资源的全量下载请求的。其次我们在设置 preload 的时候，设置 none 在 IE 下是没有生效的，虽然请求的信息并不会太怎么占用宽带资源，但还是需要注意。