通过 AJAX 阅读后显示视频 blob

Posted 2023-02-19

【中文标题】通过 AJAX 阅读后显示视频 blob

【英文标题】：Show video blob after reading it through AJAX

【发布时间】：2013-06-05 10:13:24

【问题描述】：

当我尝试在 IndexedDB 中为 Chrome 不支持的 blob 创建一个解决方法时，我发现我可以通过 AJAX 作为数组缓冲区读取图像，将其存储在 IndexedDB 中，提取它，将其转换为 blob，然后将其显示在元素使用以下代码：

var xhr = new XMLHttpRequest(),newphoto;
xhr.open("GET", "photo1.jpg", true);    
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function () 
    if (xhr.status === 200) 
        newphoto = xhr.response;
        /* store "newphoto" in IndexedDB */
        ...
    


document.getElementById("show_image").onclick=function() 
    var store = db.transaction("files", "readonly").objectStore("files").get("image1");
    store.onsuccess = function() 
        var URL = window.URL || window.webkitURL;
        var oMyBlob = new Blob([store.result.image],  "type" : "image\/jpg" );
        var docURL = URL.createObjectURL(oMyBlob);
        var elImage = document.getElementById("photo");
        elImage.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    

此代码运行良好。但是如果我尝试相同的过程，但这次加载视频（.mp4）我无法显示它：

...    
var oMyBlob = new Blob([store.result.image],  "type" : "video\/mp4" );
var docURL = URL.createObjectURL(oMyBlob);
var elVideo = document.getElementById("showvideo");
elVideo.setAttribute("src", docURL);
...
<video id="showvideo" controls ></video>
...

即使我使用 xhr.responseType = "blob" 并且没有将 blob 存储在 IndexedDB 中而是尝试在加载后立即显示它，它仍然不起作用！

xhr.responseType = "blob";
xhr.addEventListener("load", function () 
    if (xhr.status === 200) 
        newvideo = xhr.response;
        var docURL = URL.createObjectURL(newvideo);
        var elVideo = document.getElementById("showvideo");
        elVideo.setAttribute("src", docURL);
        URL.revokeObjectURL(docURL);
    

下一步是尝试对 PDF 文件做同样的事情，但我被视频文件卡住了！

【问题讨论】：

我发现问题出在以下命令上：URL.revokeObjectURL(docURL);。没有它，就会显示视频。有了它，我收到以下错误：GET blob:http%3A//localhost/c8009120-e025-46e3-8822-69d18c5a36b4 404 (Not Found)

好的，我解决了在执行 revokeObjectURL 方法之前添加一个等待视频/图像加载的事件的问题： var elImage = document.getElementById("photo"); elImage.addEventListener("load", function (evt) URL.revokeObjectURL(docURL); elImage.setAttribute("src", docURL); 我想 revokeObjectURL 方法是在视频完全加载之前执行的。

你应该用“回答你自己的问题”来回答，这样你的答案就不会在 *** 中一直显示为未回答。

【参考方案1】：

这是一个填充答案（通过在他的 cmets 中找到的 OP 解决），以防止该问题继续出现在“未回答”的问题下。

From the author:

好的，我解决了添加等待事件的问题 在执行 revokeObjectURL 方法之前要加载的视频/图像：

var elImage = document.getElementById("photo");
elImage.addEventListener("load", function (evt)  URL.revokeObjectURL(docURL);  
elImage.setAttribute("src", docURL);

我想 revokeObjectURL 方法是在视频之前执行的 已完全加载。