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

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;