主页 / 问题 / 1254599
Accepted
andreymal
Asked:2022-03-12 00:40:17 +0000 UTC2022-03-12 00:40:17 +0000 UTC

是否可以等待 <video> 完全加载？

  • 772

我有一个视频文件（例如，25 MiB）-我事先知道它很小并且可以放入缓存中，但是为了使任务复杂化，我们假设事先不知道它的持续时间（另一个示例，也是 25 MiB ）。例如，我想等待它完全加载，然后才开始播放，这样就可以保证没有任何延迟。

令我惊讶的是，我发现标签<video>缺少一个事件load。有事件和progress，但不清楚如何处理它们。我曾经尝试通过比较时长来计算下载结束，但是，首先，这种方法的可靠性存在疑问，其次，如果持续时间基本未知，它将无法工作。loadeddatacanplaythrough

对此，我有疑问：

  • 浏览器会真正将视频文件下载到最后，还是只是稍微缓冲一下？
  • 如果是这样，是否可以捕捉下载完成的那一刻？
  • 如果没有，是否可以捕捉浏览器停止进一步下载的时刻？（UPD：我找到了一个事件suspend，但是关于满载的问题仍然是相关的）

以下是两个相同的片段，其中包含不同的视频文件供您使用。

const video = document.getElementById("video");
video.onload = () => console.log("onload не срабатывает");
video.onprogress = (event) => {
  console.log(`progress ${event.timeStamp}, duration: ${video.duration}`);
};
video.onloadeddata = () => console.log("loadeddata");
video.oncanplaythrough = () => console.log("canplaythrough");
video.onsuspend = () => console.log("suspend");
<video
  id="video"
  src="https://andreymal.org/files/bbb-test/bbb-with-duration.mp4"
  controls
  preload="auto"
  style="margin-bottom: 100vh">
</video>

const video = document.getElementById("video");
video.onload = () => console.log("onload не срабатывает");
video.onprogress = (event) => {
  console.log(`progress ${event.timeStamp}, duration: ${video.duration}`);
};
video.onloadeddata = () => console.log("loadeddata");
video.oncanplaythrough = () => console.log("canplaythrough");
video.onsuspend = () => console.log("suspend");
<video
  id="video"
  src="https://andreymal.org/files/bbb-test/bbb-without-duration.mp4"
  controls
  preload="auto"
  style="margin-bottom: 100vh">
</video>

javascript

1 个回答

  1. Best Answer
    1. 不，浏览器会下载一段文件并停止下载。
    2. 您可以尝试使用 fetch 自己下载文件。
    3. 从通过 fetch 下载的数据中，您可以创建一个链接 - 然后确保所有数据都在那里，您不需要依赖缓存。

    fetch("//andreymal.org/files/bbb-test/bbb-with-duration.mp4")
  .then(resp => resp.blob())
  .then(blob => {
    var video = document.querySelector('video')
    video.src = URL.createObjectURL(blob)
    video.hidden = false
    video.play()
  })
    video { display: block; max-height: calc(100vh - 16px); margin: auto; }
    <video controls hidden muted>

    • 5

相关问题