javascript - 在视频 blob :https source 上检测到 404

Question

我使用 blob:https 作为我的视频标签的来源，如下所示:

function mk_bloburl(source_id, url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob'; //important
    xhr.onload = function(e) {
        if (this.status == 200) {
            var blob = this.response;
            var source = document.getElementById(source_id);
            var video = source;
            if (video.tagName=="SOURCE") {
                video = source.parentNode;
            }
            video.oncanplaythrough = function() {
                URL.revokeObjectURL(source.src);
            };
            source.src = URL.createObjectURL(blob);
            video.load();
        }
    };
    xhr.send();
}

mk_bloburl('review-video-source', my_video_url );

有这样的 HTML:

<video id="review-video" controls="" width="100%">
    <source id="review-video-source" />
</video>

现在，如果我重新加载页面并开始播放，它就可以工作了。如果我播放并让它播放完然后重播，无需等待时间，它就可以工作。但是，如果我重新加载页面，然后等待一段时间(例如 1-2 分钟)，然后按播放，则会失败。

我在 Chrome 浏览器中收到的消息如下所示:

GET blob:https://example.com/debeecfe-49b0-4c98-87d6-8ead325b2d75 404 (Not Found)

因此，就像该 blob 会在一段时间后从浏览器内存中自动删除一样。我想在它被删除时或者当我通过开始播放得到 404 时捕获该事件，这样我就可以刷新 blob。

我已经尝试过:

var source = document.querySelector("#review-video-source");
source.addEventListener("error", function(event) {
    console.debug("An error accoured");
});

但这似乎没有捕获错误。我能做什么？

Answer 1

您的主要问题是由您撤销 canplaythrough 中的 blobURI 引起的事件。

canplaythrough 事件只是浏览器发送的一个通知，让我们知道它认为它将能够不间断地加载和播放整个媒体；这并不意味着它已经加载了所有内容。

对于 BlobURI，连接速度非常快(来自内存)，浏览器可能认为它能够瞬间获取 4k 的《星球大战》传奇故事。
因此，您很早就收到了这个 canplaythrough 事件，但浏览器实际上尚未解压缩所有数据。尽管如此，您还是撤销了 BlobURI，当浏览器再次尝试获取数据以便解压缩并读取数据时，BlobURI 指针的末尾不再有任何内容。

因此，对于您的问题，您有两种解决方案:

• 如果您需要仅播放媒体一次:
  在 ended 中调用 URL.revokeObjectURL(blobURI)事件。这将在视频的 currentTime 第一次到达结尾时触发。

• 如果您需要多次播放视频:
  撤销 beforeunload 中的 blobURI页面的事件。这样，只要页面处于事件状态，您的 BlobURI 指针就始终处于事件状态，但不会在内存中阻塞整个 Blob 的时间超过页面生命周期(如果您根本不撤销 BlobURI，就会发生这种情况)。

<小时/>

关于如何在视频 blob:https 源上检测 404，我真的不知道有什么好方法，除了监听意外跳转到末尾，但这不应该是需要的无论如何都是 blobURI。