¿Reproducir archivo de video local (disco duro) con etiqueta de video HTML5?

Quiero lograr lo siguiente.

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

La intención es que el usuario pueda seleccionar un archivo de su disco duro.

Y la razón para no cargar es, por supuesto, los costos de transmisión y la cuota de almacenamiento. No habrá ninguna razón para guardar el archivo.

¿Es posible?

Es posible reproducir un archivo de video local.

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

Cuando se selecciona un archivo a través del inputelemento:

1. Se activa el evento 'cambio'
2. Obtenga el primer objeto File de input.files FileList
3. Cree una URL de objeto que apunte al objeto Archivo
4. Establecer la URL del objeto en la video.srcpropiedad

5. Recuéstate y mira :)

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>

Eso será posible solo si el archivo HTML también se carga con el fileprotocolo desde el disco duro del usuario local.

Si la página HTML es servida por HTTP desde un servidor, no puede acceder a ningún archivo local especificándolo en un srcatributo con el file://protocolo, ya que eso significaría que podría acceder a cualquier archivo en la computadora del usuario sin que el usuario sepa cuál sería un enorme riesgo de seguridad.

Como dijo Dimitar Bonev, puede acceder a un archivo si el usuario lo selecciona utilizando un selector de archivos por su cuenta. Sin ese paso, todos los navegadores lo prohíben por buenas razones. Por lo tanto, aunque su respuesta podría resultar útil para muchas personas, relaja el requisito del código en la pregunta original.

Me encontré con este problema hace un tiempo. El sitio web no pudo acceder al archivo de video en la PC local debido a la configuración de seguridad (realmente comprensible). 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-->

No es una solución ideal, pero funcionó para mí.