【发布时间】：2021-02-03 09:23:04
【问题描述】：
如何从 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");
【问题讨论】：
标签： javascript dom video base64 video-streaming