2017-02-22 134 views
0

所以我一直在玩一个特定的想法。我的计划是使用HTML5拖放和​​API让人们上传视频。我想要做一些客户端处理来显示视频。但是,当我运行代码时,我发现Chrome崩溃。有没有比文件阅读器更好的方式来处理大型视频文件?在html中处理非常大的视频文件5

这里是我的示例代码:直接

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; 
} 

回答

1

使用文件斑点。不需要FileReader,并且通过所有方法避免Data-URI(它们很慢并且浏览器可能会施加长度限制)。

浏览器将以更加流畅和智能的方式处理文件斑点。

关键线路是:

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

video.src = url;