HTML5 비디오/오디오는 로컬 파일을 재생합니다.-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 비디오/오디오는 로컬 파일을 재생합니다.

不言

Jun 05, 2018 am 10:55 AM

audio html5 video

이 글은 주로 HTML5 비디오/오디오 로컬 파일 재생에 대해 소개합니다. 이제는 모든 사람과 공유합니다. 필요한 친구는 이를 참조할 수 있습니다.

사용자의 승인을 받은 후에도 로컬 파일을 재생할 수 있습니다. 페이지에 입력 노드를 추가하고 유형을 파일로 지정한 다음 url을 오디오 또는 비디오의 src 값으로 설정합니다. 이 시간 동안 개발자가 동일한 질문을 반복적으로 묻는 경우가 종종 있습니다. src 속성을 재생하시겠습니까? 예를 들어 video.src="D:test.mp4"입니다.

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

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

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

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

코드를 복사합니다. 코드는 다음과 같습니다.

<html>  
<body>  
<input type="file" id="file" onchange="onInputFileChange()">  
<audio id="audio_id" controls autoplay loop>Your browser can&#39;t support HTML5 Audio</audio>  
<script>  
function onInputFileChange() {  
   var file = document.getElementById(&#39;file&#39;).files[0];  
   var url = URL.createObjectURL(file);  
   console.log(url);  
   document.getElementById("audio_id").src = url;  
}  
</script>  
</body>  
</html>

로그인 후 복사

코드는 Chrome 30 및 Firefox 24에서 테스트를 통과했으며 특정 호환성 문제가 있어야 합니다. IE(내가 아는 한, IE8 및 이전 버전은 확실히 작동하지 않을 것입니다). IE는 HTML5를 잘 지원하지 않기 때문에 IE10에 관련 API가 구현되었는지 모르겠습니다.