Safari iOS 在离线模式下不播放视频答案

【问题标题】：Safari iOS does not play video in offline modeSafari iOS 在离线模式下不播放视频
【发布时间】：2022-01-09 14:29:21
【问题描述】：

我正在尝试构建一个服务工作者，如果可用则从缓存中检索视频，如果不可用则从在线获取。这是我的代码：

self.addEventListener("fetch", function (event) {
  if (event.request.headers.get("range")) {
    caches.match(event.request.url).then(function (res) {
      if (!res) {
        log.debug(
          `Range request NOT found in cache for ${event.request.url}, activating fetch...`
        );
        return fetch(event.request);
      }
      returnRangeRequest(event);
    });
  } else {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request);
      })
    );
  }
});

function returnRangeRequest(event) {
  var rangeHeader = event.request.headers.get("range");
  var rangeMatch = rangeHeader.match(/^bytes\=(\d+)\-(\d+)?/);
  var pos = Number(rangeMatch[1]);
  var pos2 = rangeMatch[2];
  if (pos2) {
    pos2 = Number(pos2);
  }
  event.respondWith(
    caches
      .match(event.request.url)
      .then(function (res) {
        return res.arrayBuffer();
      })
      .then(function (ab) {
        let responseHeaders = {
          status: 206,
          statusText: "Partial Content",
          headers: [
            ["Content-Type", "video/mp4"],
            [
              "Content-Range",
              "bytes " +
                pos +
                "-" +
                (pos2 || ab.byteLength - 1) +
                "/" +
                ab.byteLength,
            ],
          ],
        };

        var abSliced = {};
        if (pos2 > 0) {
          abSliced = ab.slice(pos, pos2 + 1);
        } else {
          abSliced = ab.slice(pos);
        }

        log.debug(
          `Returning range request response`
        );

        return new Response(abSliced, responseHeaders);
      })
      .catch(function (err) {
        log.error(err);
      })
  );
}

当我在线并尝试播放视频时，它可以正常工作并打印调试行Range request NOT found in cache for https://example.com/vid.mp4, activating fetch...

当我使用cache.add("https://example.com/vid.mp4"); 缓存视频网址并尝试播放时，视频播放正常。

当我在 iPad 上关闭 Wifi 时出现问题。当我打开wifi后尝试播放视频时，视频停留在0:00，总长度为0:00。

我的一些发现：

当我打开 wifi 并缓存视频时，有两个使用字节 bytes=0-1 和 bytes=0-4444000 发出的请求。
当我关闭 wifi 时，会发出对 bytes=0-1 的请求，但它会停止。

我哪里错了？

【问题讨论】：

标签： javascript ios video safari service-worker

【解决方案1】：

Safari 似乎对范围请求采取了非常严格的方法，而与您的问题类似的问题有时也会出现在常规在线网络服务器上。

特别是，Safari 期望在发送具有字节范围的请求时看到“206”响应。如果服务器以“200”请求响应，则 Safari 似乎无法处理此问题。其他一些浏览器似乎对此没问题 - 例如 Chrome。

Apple 提供了一些有关 hoe 的信息来检查这一点：

如果您不确定您的媒体服务器是否支持字节范围请求，您可以在 OS X 中打开终端应用程序并使用 curl 命令行工具从服务器上的文件中下载一小段：

curl --range 0-99 http://example.com/test.mov -o /dev/null

如果工具报告它下载了 100 个字节，则媒体服务器正确处理了字节范围请求。如果它下载整个文件，您可能需要更新媒体服务器。有关 curl 的更多信息，请参阅 OS X 手册页。

有关更多详细信息和背景，请参阅此答案：https://stackoverflow.com/a/32998689/334402

【讨论】：