web-dev-qa-db-fra.com

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

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 à partir de son disque dur.

Et la raison pour 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?

html5videohtml5-videooffline
78
chris

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'élément input:

  1. l'événement 'change' est déclenché
  2. Récupère le premier objet Fichier à partir du input.filesFileList
  3. Créez un RL d'objet qui pointe sur l'objet File
  4. Définissez l'URL de l'objet sur video.src propriété

  5. Penche-toi et regarde :)

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

215
Dimitar Bonev

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

Si la page HTML est servie par HTTP depuis un serveur, vous ne pouvez pas accéder aux fichiers locaux en les spécifiant dans un attribut src avec le file:// protocole, car cela signifierait que vous pourriez accéder à n’importe quel fichier sur l’ordinateur des utilisateurs sans que celui-ci sache ce qui serait un risque énorme pour la sécurité.

Comme Dimitar Bonev l'a dit, vous pouvez accéder à un fichier si l'utilisateur le sélectionne à l'aide d'un sélecteur de fichier. Sans cette étape, tous les navigateurs l'interdisent pour de bonnes raisons. Ainsi, alors que sa réponse pourrait s'avérer utile pour beaucoup de gens, elle détache l'exigence du code de la question initiale.

7
Holger Just

Couru dans ce problème il y a un moment. Le site Web ne pouvait pas accéder au fichier vidéo sur le PC local en raison de paramètres de sécurité (compréhensibles). SEULEMENT, je pouvais contourner le problème en exécutant un serveur Web sur le PC local (server2Go) et toutes les références au fichier vidéo à partir du Web concernaient le 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.

7
jcoshea