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

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/

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

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.

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.