Phát tệp video cục bộ (ổ cứng) với thẻ video HTML5?


89

Tôi muốn đạt được những điều sau đây.

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

Mục đích là người dùng sẽ có thể chọn một tệp từ ổ cứng của mình.

Và lý do không tải lên tất nhiên là chi phí truyền tải và hạn ngạch dung lượng. Sẽ không có lý do gì để lưu tệp.

Có khả thi không?


Nó chắc chắn sẽ không hoạt động với đầu vào tệp. Nó có thể hoạt động với HTML5 ondrop, nhưng tôi không nghĩ rằng bạn có thể tận dụng điều đó để tải lên tệp. Đặt cược tốt nhất của bạn có lẽ là tạo tiện ích mở rộng Chrome.
Brian Nickel

Câu trả lời:


241

Có thể phát một tệp video cục bộ.

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

Khi một tệp được chọn thông qua inputphần tử:

  1. sự kiện 'thay đổi' được kích hoạt
  2. Lấy đối tượng Tệp đầu tiên từ input.files FileList
  3. Tạo một URL đối tượng trỏ đến đối tượng Tệp
  4. Đặt URL đối tượng thành thuộc video.srctính
  5. Dựa lưng và xem :)

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


Điều này phù hợp với tôi trong chrome trên máy Mac. Không làm việc với safari 6.1
Patrick Cullen

1
Có vẻ như có sự cố đã biết với safari: stackoverflow.com/questions/19088400/…bug.webkit.org/show_bug.cgi?id=101671
Patrick Cullen

Giải pháp tuyệt vời, nó cũng hoạt động trên Chrome dành cho Windows.
JT Taylor

Có ai đã làm công việc để trang vào và lấy ra các phần video thích hợp để không làm mất bộ nhớ trình duyệt cho các video lớn?
Eric Bloch

Không thể xem trước mov hoặc .avi tập tin hỏi những câu dưới đây: stackoverflow.com/questions/32599806/...
mpsbhat

11

Điều đó chỉ có thể thực hiện được nếu tệp HTML cũng được tải bằng filegiao thức từ đĩa cứng của người dùng cục bộ.

Nếu trang HTML được phân phối bởi HTTP từ máy chủ, bạn không thể truy cập bất kỳ tệp cục bộ nào bằng cách chỉ định chúng trong một srcthuộc tính với file://giao thức vì điều đó có nghĩa là bạn có thể truy cập bất kỳ tệp nào trên máy tính của người dùng mà người dùng không biết tệp đó sẽ là rủi ro bảo mật rất lớn.

Như Dimitar Bonev đã nói, bạn có thể truy cập tệp nếu người dùng chọn tệp đó bằng cách sử dụng công cụ chọn tệp của riêng họ. Nếu không có bước đó, nó bị cấm bởi tất cả các trình duyệt vì những lý do chính đáng. Do đó, trong khi câu trả lời của anh ấy có thể hữu ích cho nhiều người, nó làm lỏng yêu cầu so với mã trong câu hỏi ban đầu.


Giải pháp của Dimitrov Bonev cho thấy giải pháp này không chính xác - bạn có thể truy cập các tệp cục bộ thông qua input type = file.
JT Taylor

1
Chà, giải pháp của anh ấy chỉ hoạt động nếu bạn để người dùng chọn tệp trước. Bạn vẫn không thể đặt tên đường dẫn đến tệp trong nguồn HTML (như đã nêu trong câu hỏi) và truy cập nó theo cách đó. Vì vậy, về mặt kỹ thuật, giải pháp của ông là cho một câu hỏi khác.
Holger Just vào

vlc player cũng có thể chơi bất kỳ tệp nào trên máy tính, nhưng cũng có nguy cơ bảo mật. Nó có thể tải các tệp từ đĩa cứng của chúng tôi xuống máy chủ của chúng mà chúng tôi không nhận thấy chúng có muốn không, phải không? Vậy tại sao không có rủi ro bảo mật sau đó? Trong trường hợp xấu nhất, người dùng có thể được phép chấp nhận theo cách thủ công nếu anh ta cho phép trình duyệt phát tệp. Bởi vì có những trường hợp người dùng tin tưởng 100% vào trang, vì người dùng là những người làm việc trong cùng một công ty với những người tạo web.
Darius.V

6

Ran trong vấn đề này một thời gian trước đây. Trang web không thể truy cập tệp video trên PC cục bộ do cài đặt bảo mật (thực sự có thể hiểu được) Cách duy nhất tôi có thể giải quyết vấn đề này là chạy một máy chủ web trên PC cục bộ (server2Go) và tất cả các tham chiếu đến tệp video từ web là 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-->

Không phải là một giải pháp lý tưởng nhưng đã làm việc cho tôi.


2
Nếu bạn sao chép tệp vào vị trí bộ nhớ cache và đặt đường dẫn của nguồn video tới đó, tệp sẽ phát. Sao chép tệp vào context.getExternalCacheDir (). GetAbsolutePath (). Làm việc cho tôi.
Derek Wade

cũng có thể làm với bất kỳ máy chủ web nào trong máy tính của người dùng như apache hoặc mongoose
Darius.V
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.