如何从base64 javascript创建视频元素？

如何从Base64数据创建视频元素

我正试图将整个视频加载到内存中，因为浏览器很难将这个100MB mp4文件流式传输。 因为我想让这个视频在一个循环中播放，所以我想把它加载到内存中并从那里播放。 我用一个blob做了这个，但是它使应用程序运行得非常慢。我不知道为什么，但我见过其他人写的从一个blob创建一个视频元素，结果是播放速度非常慢（没有找到答案）

因此，我试图从base64字符串创建视频，但视频似乎不在readystate上。 或者不调用任何回调函数表示数据已加载

永远不会调用回调，也不会打印“DataLoaded”

这就是我尝试这样做的方式：

function CreateVideoElement(url, callback)
{
    var element = document.createElement('video');
    element.controls = false;
    element.style.display = "none";
    element.autoplay = false;
    element.setAttribute('webkit-playsinline', 'webkit-playsinline');
    element.setAttribute('playsinline', 'playsinline');
    element.onloadedmetadata = function() {
        callback();
    };
    element.src = url;
    return element;
}

function DownloadVideo(url)
{
    if (!videoFromMemory)
        return;
    fetch(url)
        .then(response = > {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        var u8 = new Uint8Array(response);
        var decoder = new TextDecoder('utf8');
        var b64encoded = btoa(decoder.decode(u8));
        textureVideo = CreateVideoElement("data:video/mp4;base64," + b64encoded, function(){
            isDataLoaded = true;
            console.log("Data loaded");
        });
        console.log('Video Complete');
    })
        .catch (error = > {
        console.error('There has been a problem with your fetch operation:', error);
    });
}
DownloadVideo("myUrl.mp4");

---

Base64编码图像通常比相应的JPG大20-30%。我想象一个100MB视频的Base64版本会比100MB mp4大很多，这可能会让你的问题变得更糟

视频的尺寸是多少？宽度/高度/帧率

使用FFprobe进行检查（这是一个API-只需将URL放在参数中：

---

)

我同意文件增加30%，但我希望它在RAM中，因此即使它更大，从RAM中传输也比从网络中传输更好。