Question

所以我一直在玩一个想法。我的计划是使用HTML5拖放和FileReader() API来让人们上传视频。我想做一些客户端处理来显示视频。但是，当我运行代码时，我发现Chrome崩溃了。有没有比文件阅读器处理大型视频文件更好的方法？

这是我的示例代码：

function handle_video(e) {
    e.stopPropagation(); // Stops some browsers from redirecting.
    e.preventDefault();
    var files = e.dataTransfer.files;
    elem = document.getElementById("dnd_dialog");
    elem.style.display="block";
    console.log(files);
    var reader  = new FileReader();
    document.getElementById("fname").value = files[0].name;
    reader.readAsDataURL(files[0]);
    reader.addEventListener("load", function () {
        document.getElementById("thumbnail_upload").src = reader.result;
    }, false);
  //    document.getElementById("thumbnail_upload").src = 
}
function drag_over(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    return false;
}

Answer 1

直接使用文件blob。不需要FileReader，并且无论如何都要避免使用Data-URI（它们很慢并且浏览器可能会施加长度限制）。

浏览器将以更流畅，更智能的方式处理文件blob。

关键线是：

var fileBlob = e.dataTransfer.files[0];
var url = (URL || webkitURL).createObjectURL(fileBlob);

video.src = url;

在html 5中处理非常大的视频文件

1 个答案: