Воспроизвести локальный (жесткий диск) видео файл с тегом HTML5 video? - PullRequest
77 голосов
/ 17 января 2012

Я хочу добиться следующего.

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

Предполагается, что пользователь сможет выбрать файл со своего жесткого диска.

Причиной отказа от загрузки являются, конечно, стоимость передачи и квота хранилища. Там не будет никаких причин, чтобы сохранить файл.

Возможно ли это?

Ответы [ 3 ]

211 голосов
/ 19 февраля 2012

Возможно воспроизведение локального видеофайла.

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

Когда файл выбран с помощью элемента input:

  1. запускается событие 'change'
  2. Получить первый File объект из input.files FileList
  3. Создать URL объекта , который указывает на объект File
  4. Установите URL-адрес объекта для свойства video.src
  5. Откиньтесь назад и наблюдайте:)

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

7 голосов
/ 08 марта 2012

столкнулся с этой проблемой некоторое время назад. Веб-сайт не может получить доступ к видеофайлу на локальном ПК из-за настроек безопасности (это понятно) Единственный способ обойти это - запустить веб-сервер на локальном ПК (server2Go), а все ссылки на видеофайл из Интернета были на 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-->

Не идеальное решение, но у меня получилось.

7 голосов
/ 17 января 2012

Это будет возможно, только если файл HTML также загружен по протоколу file с жесткого диска локального пользователя.

Если HTML-страница обслуживается по HTTP с сервера, вы не можете получить доступ к локальным файлам, указав их в атрибуте src с протоколом file://, поскольку это означает, что вы можете получить доступ к любому файлу у пользователей. компьютер без ведома пользователя, что может представлять серьезную угрозу безопасности.

Как сказал Димитар Бонев, вы можете получить доступ к файлу, если пользователь выбирает его с помощью средства выбора файлов самостоятельно. Без этого шага это запрещено всеми браузерами по уважительным причинам. Таким образом, хотя его ответ может оказаться полезным для многих людей, он ослабляет требование кода из исходного вопроса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...