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

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

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

我正在尝试将整个视频加载到内存中，因为浏览器很难流化此100MB的mp4文件。由于我希望该视频循环播放，因此我想将其加载到内存中然后从那里播放。我使用blob进行了此操作，但它使应用程序运行非常缓慢。我不知道为什么，但是我看到其他人从blob中创建视频元素的写作导致回放速度非常慢（找不到答案）。

因此，我尝试根据base64字符串创建视频，但该视频似乎未处于就绪状态。或不调用任何回调说数据已加载。

从不调用该回调，并且不显示“ 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放在参数中： https://www.streamclarity.com/probe?url=https://res.cloudinary.com/tamas-demo/video/upload/ac_none,w_550/v1547201869/web-perf/IMG_0460.mp4）