预加载

superplayer仅调用load()接口可以实现视频的“预加载”（不调用play()播放）。

import SuperPlayer from '@tencent/super-player';

const player = new SuperPlayer({ container: '#app' });
player.load({
  url: 'xx',
});

// 调用superplayer的load接口以后，即开始“预加载“，然后等待用户点击后开始播放。
document.querySelector('#playButton').addEventListener('click', () => {
  player.play();
});

“预加载”的数据大小由preloadType属性控制。创建播放器时可传入下表中preloadType的值：

属性值	说明	对应浏览器策略序号（见下文中列表）
metadata	仅加载视频头部数据，最小流量消耗	1
auto	由浏览器自行决定加载数据大小，仅赋值src属性	2
autoLoad	由浏览器自行决定加载数据大小，同时调用HTMLVideoElement的load()接口，可能会加载整个视频，属于最大流量消耗，为默认值	5

下面是代码示例：

import SuperPlayer, { PRELOAD_TYPE } from '@tencent/super-player';

const player = new SuperPlayer({
  container: '#app',
  preloadType: PRELOAD_TYPE.META_DATA,
});

player.load({
  url: 'xx',
});

浏览器的预加载策略

实际上，superplayer的预加载策略只是封装了各种浏览器的video组件加载视频数据的特性。在HTMLVideoElement中，主要由两个因素影响预加载的数据大小：

• HTMLVideoElement的load接口
• preload标签属性

我们测试并整理了各种浏览器的预加载策略对预加载数据大小的影响，下表展示了每种条件下浏览器预加载的视频长度：

序号	是否调用load接口	preload属性	chrome	mac safari	ios	android
1	❌	metadata	~7s	仅头部数据	仅头部数据	~7s
2	❌	auto	~60s	300s	仅头部数据	~60s
3	❌	无	~7s	300s	仅头部数据	~7s
4	✅	metadata	~7s	300s	300s	~7s
5	✅	auto	~60s	300s	300s	~60s
6	✅	无	~7s	300s	300s	~7s

测试视频

• 地址：http://sec.video.qq.com/p/teststatic.video/static/playtest/mp4/h264_definition_source/h264_864_486.mp4
• 时长：300s