Development Tip

HTML5 비디오 태그가있는 로컬 (하드 드라이브) 비디오 파일을 재생 하시겠습니까?

yourdevel 2020. 10. 8. 19:10
반응형

HTML5 비디오 태그가있는 로컬 (하드 드라이브) 비디오 파일을 재생 하시겠습니까?


다음을 달성하고 싶습니다.

<video src="file:///Users/username/folder/video.webm">
</video>

의도는 사용자가 자신의 하드 드라이브에서 파일을 선택할 수 있도록하는 것입니다.

그리고 업로드하지 않는 이유는 물론 전송 비용과 저장 할당량입니다. 파일을 저장할 이유가 없습니다.

가능할까요?


로컬 비디오 파일을 재생할 수 있습니다.

<input type="file" accept="video/*"/>
<video controls autoplay></video>

input요소 를 통해 파일을 선택한 경우 :

  1. '변경'이벤트가 발생했습니다.
  2. FileList 에서 첫 번째 File 객체 가져 오기input.files
  3. File 개체를 가리키는 개체 URL 만들기
  4. 개체 URL을 video.src속성으로 설정
  5. 뒤로 기대어보세요 :)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/


얼마 전에이 문제가 발생했습니다. 웹 사이트는 보안 설정으로 인해 로컬 PC의 비디오 파일에 액세스 할 수 없습니다 (정말 이해할 수 있음). localhost / video.mp4

<div id="videoDiv">
     <video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
    </div>
<!--End videoDiv-->

이상적인 솔루션은 아니지만 나를 위해 일했습니다.


HTML 파일이 file로컬 사용자의 하드 디스크에서 프로토콜 과 함께로드 된 경우에만 가능합니다 .

HTML 페이지가 서버에서 HTTP에 의해 제공되는 src경우 file://프로토콜이 있는 속성 에 로컬 파일을 지정하여 로컬 파일에 액세스 할 수 없습니다 . 이는 사용자가 어떤 파일이 엄청난 보안 위험.

Dimitar Bonev가 말했듯 이 사용자가 파일 선택기를 사용하여 파일을 선택하면 파일에 액세스 있습니다. 이 단계가 없으면 좋은 이유로 모든 브라우저에서 금지됩니다. 따라서 그의 답변은 많은 사람들에게 유용 할 수 있지만 원래 질문의 코드에서 요구 사항을 완화합니다.

참고 URL : https://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag

반응형