댓글 : 사용자의 허가를받은 후에도 여전히 로컬 파일을 재생할 수 있습니다. 입력 노드를 페이지에 삽입하고 파일로 유형을 지정한 다음 URL을 오디오 또는 비디오의 SRC 값으로 설정하십시오.
이 기간 동안 개발자는 종종 동일한 질문을 반복적으로 묻습니다. 왜 SRC 속성을 설정하여 로컬 미디어 파일을 재생할 수 없습니까? 예를 들어 video.src = d : /test.mp4입니다.
이는 사용자의 허가를 미리 얻지 않는 한 브라우저의 JavaScript가 로컬 리소스 (예 : 파일 시스템, 카메라, 마이크 등)에 직접 액세스 할 수 없기 때문입니다. 브라우저는이 제한을 구현해야합니다. JavaScript가 로컬 파일 시스템에 부당하게 액세스 할 수 있다면 사용자 개인 정보 보호 데이터를 훔치는 것이 쉬워 질 것이라고 상상해보십시오. 사용자가 네트워크에서 웹 페이지를 방문하면 신용 카드 번호, 암호, 회사 비밀 파일 및 시스템에 저장된 기타 개인 정보 파일이 사용자에게 견딜 수없는 악의적 인 JavaScript 프로그램에 의해 먼 서버에 업로드되었을 수 있습니다.
사용자의 권한을 얻은 후에도 여전히 로컬 파일을 재생할 수 있습니다. 여기 방법이 있습니다.
입력 노드를 페이지에 삽입하고 파일로 유형을 지정하십시오. 여러 파일을 재생 해야하는 경우 속성 다중 사항을 추가 할 수 있습니다. 콜백 함수 등록 파일 노드가 업데이트되면 콜백 함수에서 url.createobjecturl 함수를 호출하여 방금 선택한 파일의 URL을 가져온 다음 오디오 또는 비디오의 SRC 값으로 URL을 설정하십시오.
코드 예제는 다음과 같습니다.
<html>
<body>
<input type = "file"onchange = "OnInputFileChange ()">
<오디오 컨트롤 AutoPlay Loop> 브라우저는 HTML5 오디오를 지원할 수 없습니다 </audio>
<cript>
함수 onInputFileChange () {
var file = document.getElementById ( 'file'). 파일 [0];
var url = url.createobjecturl (파일);
Console.log (URL);
document.getElementById ( "audio_id"). src = url;
}
</스크립트>
</body>
</html>
이 코드는 Chrome 30 및 Firefox 24에서 테스트 및 전달되었습니다. IE에 대한 몇 가지 호환성 문제가 있어야합니다 (IE8과 이전 버전은 확실히 작동 할 수 없습니다). IE는 HTML5를 잘 지원하지 않으며 IE10이 관련 API를 구현하는지 모르기 때문입니다.