Lire un fichier vidéo local (disque dur) avec une balise vidéo HTML5?


89

Je veux réaliser ce qui suit.

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

L'intention est que l'utilisateur puisse sélectionner un fichier sur son disque dur.

Et la raison de ne pas télécharger est bien sûr les coûts de transmission et le quota de stockage. Il n'y aura aucune raison de sauvegarder le fichier.

C'est possible?


Cela ne fonctionnera certainement pas avec une entrée de fichier. Cela peut fonctionner avec HTML5 ondrop, mais je ne pense pas que vous puissiez en tirer parti pour un téléchargement de fichier. Votre meilleur pari serait probablement de faire une extension Chrome.
Brian Nickel

Réponses:


241

Il est possible de lire un fichier vidéo local.

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

Lorsqu'un fichier est sélectionné via l' inputélément:

  1. L'événement 'change' est déclenché
  2. Obtenez le premier objet File de la input.files FileList
  3. Créer une URL d'objet qui pointe vers l'objet File
  4. Définissez l'URL de l'objet sur la video.srcpropriété
  5. Penchez-vous et regardez :)

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


Cela fonctionne pour moi dans Chrome sur un Mac. Ne fonctionne pas avec safari 6.1
Patrick Cullen

1
Il semble qu'il y ait des problèmes connus avec safari: stackoverflow.com/questions/19088400/… et bugs.webkit.org/show_bug.cgi?id=101671
Patrick Cullen

Excellente solution, elle fonctionne également sur Chrome pour Windows.
JT Taylor

Quelqu'un a-t-il fait le travail de page dans et hors des morceaux appropriés de vidéo afin de ne pas tuer la mémoire du navigateur pour les grandes vidéos?
Eric Bloch

Impossible de prévisualiser les fichiers .mov ou .avi A posé la question ici: stackoverflow.com/questions/32599806/…
mpsbhat

11

Cela ne sera possible que si le fichier HTML est également chargé avec le fileprotocole du disque dur de l'utilisateur local.

Si la page HTML est servie par HTTP à partir d'un serveur, vous ne pouvez accéder à aucun fichier local en les spécifiant dans un srcattribut avec lefile:// protocole car cela signifierait que vous pourriez accéder à n'importe quel fichier sur l'ordinateur des utilisateurs sans que l'utilisateur sache ce qui serait un risque de sécurité énorme.

Comme l'a dit Dimitar Bonev, vous pouvez accéder à un fichier si l'utilisateur le sélectionne à l'aide d'un sélecteur de fichier. Sans cette étape, il est interdit par tous les navigateurs pour de bonnes raisons. Ainsi, bien que sa réponse puisse s'avérer utile pour de nombreuses personnes, elle dégage l'exigence du code de la question d'origine.


La solution de Dimitrov Bonev montre que cette solution est incorrecte - vous pouvez accéder aux fichiers locaux via input type = file.
JT Taylor

1
Eh bien, sa solution ne fonctionne que si vous laissez l'utilisateur sélectionner le fichier en premier. Vous ne pouvez toujours pas nommer le chemin du fichier dans la source HTML (comme indiqué dans la question) et y accéder de cette façon. Ainsi, sa solution est techniquement pour une autre question.
Holger Just

vlc player peut également lire n'importe quel fichier sur l'ordinateur, mais il existe donc également un risque de sécurité. Il peut télécharger des fichiers de notre disque dur vers leurs serveurs sans que nous nous en rendions compte s'ils le souhaitent, n'est-ce pas? Alors pourquoi il n'y a pas de risque de sécurité alors? Dans le pire des cas, l'utilisateur pourrait être autorisé à accepter manuellement s'il autorise le navigateur à lire le fichier. Parce qu'il y a des situations où les utilisateurs font confiance à 100% à la page, parce que les utilisateurs sont ceux qui travaillent dans la même entreprise que les créateurs Web.
Darius.V

6

Je suis tombé sur ce problème il y a quelque temps. Le site Web ne pouvait pas accéder au fichier vidéo sur le PC local en raison des paramètres de sécurité (compréhensible vraiment) La SEULE façon de le contourner était d'exécuter un serveur Web sur le PC local (server2Go) et toutes les références au fichier vidéo à partir du Web étaient au 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-->

Pas une solution idéale mais a fonctionné pour moi.


2
Si vous copiez le fichier dans un emplacement de cache et définissez le chemin de la source vidéo vers celui-ci, il sera lu. Copiez le fichier dans context.getExternalCacheDir (). GetAbsolutePath (). Travaille pour moi.
Derek Wade

peut également faire avec n'importe quel serveur Web dans l'ordinateur des utilisateurs comme apache ou mangouste
Darius.V
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.