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

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

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

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

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

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

코드 복사

코드는 다음과 같습니다.

< html>

audio_id"는 자동 재생 루프를 제어합니다>브라우저는 HTML5 오디오를 지원할 수 없습니다