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


89

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?


Definitivamente no funcionará con una entrada de archivo. Puede funcionar con HTML5 ondrop, pero no creo que pueda aprovechar eso para cargar un archivo. Su mejor apuesta probablemente sería hacer una extensión de Chrome.
Brian Nickel

Respuestas:


241

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/


Esto me funciona en Chrome en una Mac. No funciona con Safari 6.1
Patrick Cullen


Excelente solución, también funciona en Chrome para Windows.
JT Taylor

¿Alguien ha hecho el trabajo de introducir y extraer fragmentos de video apropiados para no matar la memoria del navegador para videos grandes?
Eric Bloch

No se puede obtener una vista previa de los archivos .mov o .avi Se hizo la pregunta aquí: stackoverflow.com/questions/32599806/…
mpsbhat

11

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.


La solución de Dimitrov Bonev muestra que esta solución es incorrecta: puede acceder a los archivos locales a través de input type = file.
JT Taylor

1
Bueno, su solución solo funciona si dejas que el usuario seleccione el archivo primero. Aún no puede nombrar la ruta al archivo en la fuente HTML (como se indica en la pregunta) y acceder a él de esa manera. Por tanto, su solución es técnicamente para otra cuestión.
Holger Just

El reproductor vlc también puede reproducir cualquier archivo en la computadora, pero también existe un riesgo de seguridad. Puede descargar archivos de nuestro disco duro a sus servidores sin que nos demos cuenta si quieren, ¿no? Entonces, ¿por qué no existe ningún riesgo de seguridad? En el peor de los casos, se le podría permitir al usuario aceptar manualmente si permite que el navegador reproduzca el archivo. Porque hay situaciones en las que el usuario confía al 100% en la página, porque los usuarios son los que trabajan en la misma empresa que los creadores web.
Darius.V

6

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í.


2
Si copia el archivo a una ubicación de caché y establece la ruta de la fuente de video, se reproducirá. Copie el archivo a context.getExternalCacheDir (). GetAbsolutePath (). Funciona para mi.
Derek Wade

también se puede hacer con cualquier servidor web en la computadora de los usuarios como apache o mangosta
Darius.V
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.