매우 큰 비디오 파일 다루기 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

를 사용하여 파일의 모양을 직접 :

여기 내 예제 코드입니다. FileReader가 필요하지 않으며 모든 수단으로 Data-URI를 피할 수 있습니다 (속도가 느리고 브라우저에서 길이 제한이 적용될 수 있습니다).

브라우저는 File blob을보다 유동적이고 지능적인 방식으로 처리합니다.

핵심 라인은 다음과 같습니다

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

video.src = url;