HTML5 비디오/오디오는 로컬 파일을 재생합니다.
- 不言원래의
- 2018-06-05 10:55:127523검색
이 글은 주로 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't support HTML5 Audio</audio>
<script>
function onInputFileChange() {
var file = document.getElementById('file').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가 구현되었는지 모르겠습니다.
관련 권장사항:
HTML에서 e8e496c15ba93d81f6ea4fe5f55a2244 태그 사용에 대한 자세한 설명
위 내용은 HTML5 비디오/오디오는 로컬 파일을 재생합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!