나중에 사용할 수 있도록 window.URL.createObjectURL() 결과를 저장하는 방법은 무엇입니까?

Question

동영상 파일을 선택하는 HTML5에서 애플리케이션을 만들고 있는데, 애플리케이션은 HTML5 video 태그와 window.URL.createObjectURL() 태그로 재생합니다. 문제는 내가 로컬 스토리지에서이 동영상에 대한 데이터를 저장하고 사용자가 내 응용 프로그램을 사용할 때 다시 재생하려는, 그러나이 방법의 결과에 대한 Mozilla MDN states 같은 :

가

브라우저가 문서를 자동으로 다음을 발표 할 예정이다 언로드 됨

그래서 내가하려는 일을 할 수 있습니까? 또는 window.URL.createObjectURL()없이 동일한 작업을 수행 할 수 있습니다.

Answer 1

나는 createObjectURL()을 사용하지 않았지만, 올바르게 이해했다면 본질적으로 파일이나 메모리 내 개체에 대한 임시 참조입니다. 실제 비디오를 저장하려면 다음에 사용자가 응용 프로그램을 방문 할 때 비디오 포인터가 더 이상이 포인터에 의해 참조되지 않으므로 유용하지 않습니다.

대신 URL에 실제로 파일의 전체 데이터가 포함되어 있으므로 data: URL로이 작업을 수행 할 수 있습니다. This example은 FileReader을 사용하여 데이터 URL을 생성하는 방법을 보여줍니다. 나는이 작업을 수행 할 수 있어야한다고 생각 :

var reader = new FileReader(); 
reader.onload = function(e) { 
    var myDataUrl = e.target.result; 
    // do something with the URL in the DOM, 
    // then save it to local storage 
}; 
reader.readAsDataURL(file); 

업데이트

: 당신이 당신의 의견에주의로, 최대 1GB 가고 싶은 경우에, 당신은 아마 더 FileSystem API에 의해 제공 될 것입니다. 이렇게하려면 로컬 파일을 가져 와서 파일의 복사본을 영구 파일 시스템 저장소에 저장 한 다음 createObjectURL()을 사용하여 파일 복사본의 URL을 가져와야합니다. 여전히 디스크 공간에 문제가 있습니다. 사용자의 파일 시스템에 1GB의 중복 파일 내용을 추가했는데, 그렇지 않으면 브라우저 샌드 박스 외부의 파일에 대한 지속적인 참조를 유지할 수 없다고 생각합니다.