Воспроизвести локальный (жесткий диск) видеофайл с тегом HTML5 video?

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

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

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

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

Является ли это возможным?

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

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

(function localFileVideoPlayer() {
  'use strict'
  var URL = window.URL || window.webkitURL
  var displayMessage = function(message, isError) {
    var element = document.querySelector('#message')
    element.innerHTML = message
    element.className = isError ? 'error' : 'info'
  }
  var playSelectedFile = function(event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var canPlay = videoNode.canPlayType(type)
    if (canPlay === '') canPlay = 'no'
    var message = 'Can play type "' + type + '": ' + canPlay
    var isError = canPlay === 'no'
    displayMessage(message, isError)

    if (isError) {
      return
    }

    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()

video,
input {
  display: block;
}

input {
  width: 100%;
}

.info {
  background-color: aqua;
}

.error {
  background-color: red;
  color: white;
}

<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*" />
<video controls autoplay></video>

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

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

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

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

Не идеальное решение, но сработало для меня.