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


89

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

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

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

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

가능합니까?


파일 입력에서는 확실히 작동하지 않습니다. HTML5 ondrop에서 작동 할 수 있지만 파일 업로드에 활용할 수는 없다고 생각합니다. 가장 좋은 방법은 아마도 Chrome 확장 프로그램을 사용하는 것입니다.
Brian Nickel

답변:


241

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

<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/


이것은 Mac의 크롬에서 나를 위해 작동합니다. 사파리 6.1에서 작동하지 않음
Patrick Cullen 2013

1
safari에 알려진 문제가있는 것 같습니다. stackoverflow.com/questions/19088400/…bugs.webkit.org/show_bug.cgi?id=101671
Patrick Cullen

탁월한 솔루션이며 Windows 용 Chrome에서도 작동합니다.
JT Taylor

큰 비디오를위한 브라우저 메모리를 죽이지 않도록 적절한 비디오 청크를 페이지 인 / 아웃하는 작업을 수행 한 사람이 있습니까?
Eric Bloch 2014 년

미리보기 .MOV 할 수 없음 또는 .AVI 여기에 질문을 묻는 파일 : stackoverflow.com/questions/32599806/...
mpsbhat

11

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

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

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


Dimitrov Bonev의 솔루션은이 솔루션이 올바르지 않음을 보여줍니다. 입력 유형 = 파일을 통해 로컬 파일에 액세스 할 수 있습니다.
JT 테일러

1
글쎄, 그의 솔루션은 사용자가 먼저 파일을 선택하도록 허용하는 경우에만 작동합니다. 여전히 HTML 소스 (질문에 언급 된대로)에있는 파일 경로의 이름을 지정하고 그런 방식으로 액세스 할 수 없습니다. 따라서 그의 해결책은 기술적으로 다른 질문에 대한 것입니다.
Holger Just

vlc 플레이어는 컴퓨터의 모든 파일을 재생할 수 있지만 보안 위험도 있습니다. 우리가 원하는지 알지 못해도 하드 디스크에서 서버로 파일을 다운로드 할 수 있습니다. 그렇지 않습니까? 그렇다면 보안 위험이없는 이유는 무엇입니까? 최악의 경우 브라우저에서 파일을 재생할 수 있도록 허용하면 사용자가 수동으로 수락 할 수 있습니다. 사용자가 웹 제작자와 같은 회사에서 일하는 사람이기 때문에 사용자가 페이지를 100 % 신뢰하는 상황이 있기 때문입니다.
Darius.V 2015 년

6

얼마 전에이 문제가 발생했습니다. 웹 사이트는 보안 설정으로 인해 로컬 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-->

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


2
파일을 캐시 위치에 복사하고 비디오 소스의 경로를 설정하면 해당 파일이 재생됩니다. context.getExternalCacheDir (). getAbsolutePath ()에 파일을 복사합니다. 나를 위해 작동합니다.
Derek Wade

또한 아파치와 같은 사용자의 컴퓨터에있는 모든 웹 서버와 함께 할 또는 몽구스 수
Darius.V
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.