HTML5 비디오/오디오 로컬 파일 재생 예제 Introduction_html5 튜토리얼 기술

이 기간 동안 개발자들이 같은 질문을 반복적으로 묻는 것을 자주 봅니다. 왜 src 속성을 설정하면 로컬 미디어 파일을 재생할 수 없나요? 예를 들어 video.src="D:test.mp4"입니다.

브라우저의 JavaScript는 사용자의 사전 허가 없이는 로컬 리소스(예: 파일 시스템, 카메라, 마이크 등)에 직접 액세스할 수 없기 때문입니다. 브라우저에서도 이러한 제한을 적용해야 합니다. JavaScript가 부주의하게 로컬 파일 시스템에 액세스할 수 있다면 사용자가 인터넷에서 웹 페이지에 액세스할 때 쉽게 사용자의 개인 데이터를 훔칠 수 있을 것입니다. 자신도 모르게 컴퓨터에 저장된 신용카드 번호, 비밀번호, 회사 비밀 파일과 같은 개인 파일이 악성 JavaScript 프로그램에 의해 원격 서버에 업로드되었을 수 있으며, 이는 사용자가 용납할 수 없는 일입니다.

사용자의 허가를 받은 후에도 로컬 파일을 재생할 수 있는 방법은 다음과 같습니다.

페이지에 입력 노드를 삽입하고 유형을 파일로 지정하세요. 여러 파일을 재생해야 하는 경우 속성을 여러 개 추가할 수 있습니다. 파일 노드 업데이트 시 콜백 함수를 등록합니다. 콜백 함수에서 URL.createObjectURL 함수를 호출하여 방금 선택한 파일의 URL을 가져온 다음 해당 URL을 오디오 또는 비디오의 src 값으로 설정합니다.

코드 예시는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

audio_id"는 자동 재생 루프를 제어합니다>브라우저는 HTML5 오디오를 지원할 수 없습니다
<script> <br />function onInputFileChange() { <br /> var file = document.getElementById('file').files[ 0]; var url = URL.createObjectURL(file); <br /> console.log(url) <br /> document.getElementById("audio_id").src = url; ;/script> <br /> <br /></script>