此页面由 Cloud Translation API 翻译。

预加载音频和视频，从而快速播放

如何通过主动预加载资源来加快媒体播放速度。

François Beaufort

自本文发布以来，浏览器对 <link rel="preload" as="video"> 的支持发生了变化，目前不支持 Chrome 和 Safari。如需测试支持情况，请参阅“支持”部分。

更快的开始播放速度意味着有更多人观看你的视频或收听你的音乐音频。这是众所周知的事实。在本文中，我将为您介绍您可以采用什么技巧来通过主动根据您的用例预加载资源。

我将说明三种预加载媒体文件的方法，首先介绍它们的优点和缺点

	很棒...	但是...
视频预加载属性	易于使用，用于托管在网络服务器上的唯一文件。	浏览器可能会完全忽略该属性。
		当 HTML 文档完全加载并已解析。
		Media Source Extensions (MSE) 会忽略媒体元素上的 `preload` 属性，因为应用需负责向 MSE 提供媒体
链接预加载	强制浏览器在不屏蔽的情况下请求视频资源触发文档的 `onload` 事件。	HTTP 范围请求不兼容。
链接预加载	与 MSE 和文件段兼容。	应仅用于获取完整资源时小型媒体文件 (<5 MB)。
手动缓冲	完全控制	复杂的错误处理由网站负责。

视频预加载属性

如果视频源是托管在网络服务器上的唯一文件，您可能需要将使用视频 preload 属性来提示浏览器如何需要预加载的信息或内容。这意味着 Media Source Extensions 扩展 (MSE) 与 preload 不兼容。

只有在创建了初始 HTML 文档后，系统才会开始提取资源已完全加载并解析（例如，DOMContentLoaded 事件已触发）而在调用资源时会触发完全不同的load事件实际已被提取的内容

将 preload 属性设置为 metadata 表示用户预计需要该视频，但会提取其元数据（尺寸、跟踪列表、持续时间等）是可取的。请注意，从 Chrome 中开始 64，则 preload 的默认值为 metadata。（过去是 auto ）。

<video id="video" preload="metadata" src="file.mp4" controls></video>

<script>
  video.addEventListener('loadedmetadata', function() {
    if (video.buffered.length === 0) return;

    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
  });
</script>

将 preload 属性设置为 auto 表示浏览器可能会缓存提供足够的数据，无需停止播放，即可完整播放进一步缓冲。

<video id="video" preload="auto" src="file.mp4" controls></video>

<script>
  video.addEventListener('loadedmetadata', function() {
    if (video.buffered.length === 0) return;

    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
    console.log(`${bufferedSeconds} seconds of video are ready to play.`);
  });
</script>

不过，有几点需要注意。由于这只是一种提示并忽略 preload 属性。在撰写本文时，请注意以下规则已在 Chrome 中应用：

启用流量节省程序后，Chrome 会强制将 preload 值设为 none。
在 Android 4.3 中，由于 Androidpreloadnone bug。
使用移动网络连接（2G、3G 和 4G）时，Chrome 会强制 preload 值 metadata。

提示

如果您的网站包含同一个网域中的许多视频资源，建议您将 preload 值设置为 metadata，或定义 poster 属性，并将 preload 设置为 none。这样，您就可以避免到同一网域的 HTTP 连接数上限（根据 HTTP 1.1 规范），这可能会挂起资源加载。请注意，这也可以如果视频并非核心用户体验的一部分，可以提高网页加载速度。

链接预加载

自本文发布以来，浏览器对 <link rel="preload" as="video"> 的支持发生了变化，目前不支持 Chrome 和 Safari。如需测试支持情况，请参阅“支持”部分。

如其他文章中所述，链接预加载是一种声明式提取，您可以强制浏览器请求资源在网页下载期间屏蔽 load 事件。资源通过 <link rel="preload"> 加载的文件会存储在本地浏览器中，直到在 DOM、JavaScript 和或 CSS 提供商。

预加载与预提取的不同之处在于，它侧重于当前的导航和根据资源类型（脚本、样式、字体、视频、音频等）。它应该用于为当前的会话。

预加载完整视频

下面介绍了如何在您的网站上预加载完整视频， JavaScript 请求获取视频内容，并将其作为资源从缓存中读取可能已被浏览器缓存。如果没有则会进行常规网络提取。

<link rel="preload" as="video" href="https://cdn.com/small-file.mp4">

<video id="video" controls></video>

<script>
  // Later on, after some condition has been met, set video source to the
  // preloaded video URL.
  video.src = 'https://cdn.com/small-file.mp4';
  video.play().then(() => {
    // If preloaded video URL was already cached, playback started immediately.
  });
</script>

由于预加载的资源将由 Google Cloud 中的在此示例中，as 预加载链接的值为 video。如果是音频内容元素，则属性为 as="audio"。

预加载第一个片段

以下示例展示了如何使用 <link rel="preload"> 预加载视频的第一段，并将其与 Media Source Extensions 搭配使用。如果您不熟悉使用 MSE JavaScript API，请参阅 MSE 基础知识。

为简单起见，我们假设整个视频 file_1.webm、file_2.webm、file_3.webm 等较小的文件。

<link rel="preload" as="fetch" href="https://cdn.com/file_1.webm">

<video id="video" controls></video>

<script>
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });

  function sourceOpen() {
    URL.revokeObjectURL(video.src);
    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');

    // If video is preloaded already, fetch will return immediately a response
    // from the browser cache (memory cache). Otherwise, it will perform a
    // regular network fetch.
    fetch('https://cdn.com/file_1.webm')
    .then(response => response.arrayBuffer())
    .then(data => {
      // Append the data into the new sourceBuffer.
      sourceBuffer.appendBuffer(data);
      // TODO: Fetch file_2.webm when user starts playing video.
    })
    .catch(error => {
      // TODO: Show "Video is not available" message to user.
    });
  }
</script>

警告：对于跨源资源，请确保已正确设置 CORS 标头。由于我们无法通过使用 fetch(videoFileUrl, { mode: 'no-cors' }) 检索到的不透明响应创建数组缓冲区，因此无法馈送任何视频或音频元素。

支持

自本文发布以来，浏览器对 <link rel="preload" as="video"> 的支持发生了变化，目前不支持 Chrome 和 Safari。使用以下代码查看支持信息，了解使用此功能的好处。

您可以使用as<link rel=preload> 代码段：

function preloadFullVideoSupported() {
  const link = document.createElement('link');
  link.as = 'video';
  return (link.as === 'video');
}

function preloadFirstSegmentSupported() {
  const link = document.createElement('link');
  link.as = 'fetch';
  return (link.as === 'fetch');
}

手动缓冲

在深入了解 Cache API 和 Service Worker 之前，我们先来看看如何使用 MSE 手动缓冲视频。以下示例假定您的服务器支持 HTTP Range 但使用 .zip 文件细分。请注意，有些中间件库如 Google 的 Shaka Player、JW Player 和 Video.js 专门为您处理这一问题。

<video id="video" controls></video>

<script>
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });

  function sourceOpen() {
    URL.revokeObjectURL(video.src);
    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');

    // Fetch beginning of the video by setting the Range HTTP request header.
    fetch('file.webm', { headers: { range: 'bytes=0-567139' } })
    .then(response => response.arrayBuffer())
    .then(data => {
      sourceBuffer.appendBuffer(data);
      sourceBuffer.addEventListener('updateend', updateEnd, { once: true });
    });
  }

  function updateEnd() {
    // Video is now ready to play!
    const bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
    console.log(`${bufferedSeconds} seconds of video are ready to play.`);

    // Fetch the next segment of video when user starts playing the video.
    video.addEventListener('playing', fetchNextSegment, { once: true });
  }

  function fetchNextSegment() {
    fetch('file.webm', { headers: { range: 'bytes=567140-1196488' } })
    .then(response => response.arrayBuffer())
    .then(data => {
      const sourceBuffer = mediaSource.sourceBuffers[0];
      sourceBuffer.appendBuffer(data);
      // TODO: Fetch further segment and append it.
    });
  }
</script>

注意事项

由于您现在可以控制整个媒体缓冲体验，因此建议您考虑设备的电池电量、“流量节省程序模式”用户偏好设置和在考虑预加载时需要考虑哪些网络信息

电池感知

考虑用户设备的电池电量然后再考虑如何预加载视频这将在电池电量达到 30% 时延长电池续航时间较低。

在以下情况下，停用预加载或至少预加载设备电量耗尽

if ('getBattery' in navigator) {
  navigator.getBattery()
  .then(battery => {
    // If battery is charging or battery level is high enough
    if (battery.charging || battery.level > 0.15) {
      // TODO: Preload the first segment of a video.
    }
  });
}

检测“流量节省程序”

使用 Save-Data 客户端提示请求标头提供快速和轻量级提示向已选择“节省流量”的用户提供应用模式。通过标识此请求标头，您的应用可以自定义和针对受成本和性能限制的情况提供优化的用户体验用户。

如需了解详情，请参阅使用 Save-Data 交付快速的轻量级应用。

根据网络信息智能加载

您可能需要在预加载之前检查 navigator.connection.type。时间设置为 cellular，则可以防止预加载并建议用户他们的移动网络运营商可能会收取带宽费用，自动播放之前缓存的内容

if ('connection' in navigator) {
  if (navigator.connection.type == 'cellular') {
    // TODO: Prompt user before preloading video
  } else {
    // TODO: Preload the first segment of a video.
  }
}

查看网络信息示例，了解如何对网络做出反应也会随之更改

预缓存多个第一个片段

如果我想推测预加载某些媒体内容知道用户最终会选择哪种媒体？如果用户使用的是的网页，那么我们可能有足够的内存来提取一个每个片段文件，但我们绝对不应创建 10 个隐藏 <video> 元素和 10 个 MediaSource 对象，并开始馈送这些数据。

下面的两部分示例展示了如何预缓存了解如何使用功能强大且易于使用的 Cache API。请注意，也可以使用 IndexedDB 来实现。我们尚未使用 Service Worker，您还可以通过 window 对象访问 Cache API。

提取和缓存

const videoFileUrls = [
  'bat_video_file_1.webm',
  'cow_video_file_1.webm',
  'dog_video_file_1.webm',
  'fox_video_file_1.webm',
];

// Let's create a video pre-cache and store all first segments of videos inside.
window.caches.open('video-pre-cache')
.then(cache => Promise.all(videoFileUrls.map(videoFileUrl => fetchAndCache(videoFileUrl, cache))));

function fetchAndCache(videoFileUrl, cache) {
  // Check first if video is in the cache.
  return cache.match(videoFileUrl)
  .then(cacheResponse => {
    // Let's return cached response if video is already in the cache.
    if (cacheResponse) {
      return cacheResponse;
    }
    // Otherwise, fetch the video from the network.
    return fetch(videoFileUrl)
    .then(networkResponse => {
      // Add the response to the cache and return network response in parallel.
      cache.put(videoFileUrl, networkResponse.clone());
      return networkResponse;
    });
  });
}

请注意，如果我要使用 HTTP Range 请求，则必须手动重新创建 Response 对象，因为 Cache API 目前不支持 Range 响应。是请注意，调用 networkResponse.arrayBuffer() 会提取全部内容将响应一次性放入渲染器内存，这也是为什么您可能需要使用范围很小

我修改了上面的部分示例以保存 HTTP 范围，以供参考向视频预缓存发送多个请求

    ...
    return fetch(videoFileUrl, { headers: { range: 'bytes=0-567139' } })
    .then(networkResponse => networkResponse.arrayBuffer())
    .then(data => {
      const response = new Response(data);
      // Add the response to the cache and return network response in parallel.
      cache.put(videoFileUrl, response.clone());
      return response;
    });

播放视频

当用户点击播放按钮时，我们会提取视频的第一段，以便立即开始播放（如果可用）。否则，我们将直接从网络中提取。请注意且用户可以决定清除缓存。

如前所述，我们使用 MSE 将视频的第一段馈送到视频中元素。

function onPlayButtonClick(videoFileUrl) {
  video.load(); // Used to be able to play video later.

  window.caches.open('video-pre-cache')
  .then(cache => fetchAndCache(videoFileUrl, cache)) // Defined above.
  .then(response => response.arrayBuffer())
  .then(data => {
    const mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });

    function sourceOpen() {
      URL.revokeObjectURL(video.src);

      const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp09.00.10.08"');
      sourceBuffer.appendBuffer(data);

      video.play().then(() => {
        // TODO: Fetch the rest of the video when user starts playing video.
      });
    }
  });
}

使用 Service Worker 创建范围响应

如果您已经将整个视频文件并将其保存在 Cache API？当浏览器发送 HTTP Range 请求时，您肯定不会需要将整个视频放入渲染器内存中，因为 Cache API 不需要目前支持 Range 响应。

我来展示一下如何拦截这些请求并返回自定义的 Range 从 Service Worker 返回。

addEventListener('fetch', event => {
  event.respondWith(loadFromCacheOrFetch(event.request));
});

function loadFromCacheOrFetch(request) {
  // Search through all available caches for this request.
  return caches.match(request)
  .then(response => {

    // Fetch from network if it's not already in the cache.
    if (!response) {
      return fetch(request);
      // Note that we may want to add the response to the cache and return
      // network response in parallel as well.
    }

    // Browser sends a HTTP Range request. Let's provide one reconstructed
    // manually from the cache.
    if (request.headers.has('range')) {
      return response.blob()
      .then(data => {

        // Get start position from Range request header.
        const pos = Number(/^bytes\=(\d+)\-/g.exec(request.headers.get('range'))[1]);
        const options = {
          status: 206,
          statusText: 'Partial Content',
          headers: response.headers
        }
        const slicedResponse = new Response(data.slice(pos), options);
        slicedResponse.setHeaders('Content-Range': 'bytes ' + pos + '-' +
            (data.size - 1) + '/' + data.size);
        slicedResponse.setHeaders('X-From-Cache': 'true');

        return slicedResponse;
      });
    }

    return response;
  }
}

请务必注意，我使用 response.blob() 重新创建了此 Slice 因为这仅会为我提供一个文件句柄 response.arrayBuffer() 将整个文件引入渲染器内存。

我的自定义 X-From-Cache HTTP 标头可用于了解此请求是否来自缓存或网络。可供其他玩家使用 ShakaPlayer 忽略响应时间作为指标网络速度

已了解官方示例媒体应用，尤其是其 ranged-response.js 文件，获取有关如何处理 Range 的完整解决方案请求。