0

我正在尝试在 Javascript 中使用通过 fetch() 实现的 blob URL，并且在调用 URL.revokeObjectURL() 之前，响应返回的 blob URL(text/plain) 将转到原始文件 URL。

但是，当我使用 blob URL 更改元素的 src 属性并尝试在调用 revokeObjectURL() 之前加载视频时，我遇到了来自控制台的 ERR_REQUEST_RANGE_NOT_SATISFIED 错误。

但这次我要使用的视频是一个静态 .mp4 文件，可以通过 URL 检索。

有什么提示可以解决这个问题吗？

我曾以相同的方式尝试过使用 .m3u8 源，但没关系。

function fetchVideo(url, opt) {
  return fetch(url, opt).then(function(response) {
    return response.blob();
  });
}

function replaceSrc(blob, source) {
    bloburl = URL.createObjectURL(blob);
    source.setAttribute('src', bloburl);
    source.removeAttribute('data-src');
    $(source).closest('video').load();
    URL.revokeObjectURL(bloburl);
}

function changeVideoSource(videoElement) {
    if(videoElement[0] != undefined) {
        var source = videoElement[0].getElementsByTagName('source')[0];
        var src = source.getAttribute('data-src');
        var fetchHeaders = new Headers({
            "Content-Type": "text/plain"
        });
        var fetchOpt = {
            method: 'GET',
            headers: fetchHeaders,
            mode: 'no-cors'
        };
        fetchVideo(src, fetchOpt).then(function(blob){
            replaceSrc(blob, source);
        });
    }
}

<video autoplay muted preload="auto">
    <source id="vidSrc" data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>
4

0 回答 0