Lokale (Festplatten-) Videodatei mit HTML5-Video-Tag abspielen?

Ich möchte Folgendes erreichen.

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

Die Absicht ist, dass der Benutzer eine Datei von seiner Festplatte auswählen kann.

Und der Grund für das Nicht-Hochladen sind natürlich die Übertragungskosten und die Speicherquote. Es gibt keinen Grund, die Datei zu speichern.

Ist es möglich?

Es ist möglich, eine lokale Videodatei abzuspielen.

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

Wenn eine Datei über das inputElement ausgewählt wird:

1. 'change'-Ereignis wird ausgelöst
2. Holen Sie sich das erste File- Objekt aus der input.files FileList
3. Erstellen Sie eine Objekt-URL , die auf das Dateiobjekt verweist
4. Setzen Sie die Objekt-URL auf video.src Eigenschaft fest

5. Lehnen Sie sich zurück und schauen Sie zu :)

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>

Dies ist nur möglich, wenn die HTML-Datei auch mit dem fileProtokoll von der Festplatte des lokalen Benutzers geladen wird .

Wenn die HTML-Seite von einem Server über HTTP bereitgestellt wird, können Sie nicht auf lokale Dateien zugreifen, indem Sie sie in einem srcAttribut mit dem file://Protokoll angeben, da dies bedeuten würde, dass Sie auf jede Datei auf dem Computer des Benutzers zugreifen können, ohne dass der Benutzer weiß, welche eine ist großes Sicherheitsrisiko.

Als Dimitar Bonev sagte : Sie können eine Datei zugreifen , wenn der Benutzer es mit einem Dateiauswahl auf ihre eigenen auswählt. Ohne diesen Schritt ist es aus guten Gründen von allen Browsern verboten. Während sich seine Antwort für viele Menschen als nützlich erweisen mag, löst sie die Anforderung aus dem Code in der ursprünglichen Frage.

Bin vor einiger Zeit auf dieses Problem gestoßen. Die Website konnte aufgrund von Sicherheitseinstellungen (wirklich verständlich) nicht auf die Videodatei auf dem lokalen PC zugreifen. Ich konnte sie nur umgehen, indem ich einen Webserver auf dem lokalen PC (server2Go) ausführte und alle Verweise auf die Videodatei aus dem Internet auf die 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-->

Keine ideale Lösung, hat aber für mich funktioniert.