it-swarm.com.de

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

Ich möchte folgendes erreichen.

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

Der Benutzer soll eine Datei von seiner Festplatte auswählen können.

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

Ist es möglich?

78
chris

Es ist möglich, eine lokale Videodatei abzuspielen.

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

Wenn eine Datei über das Element input ausgewählt wird:

  1. 'change'-Ereignis wird ausgelöst
  2. Holen Sie sich das erste File Objekt aus dem input.filesFileList
  3. Erstellen Sie eine Objekt-URL , die auf das File-Objekt verweist
  4. Setzen Sie die Objekt-URL auf video.src Eigentum
  5. Lehnen Sie sich zurück und schauen Sie zu :)

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

215
Dimitar Bonev

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

Wenn die HTML-Seite von einem Server aus über HTTP bereitgestellt wird, können Sie nicht auf lokale Dateien zugreifen, indem Sie sie in einem src -Attribut mit dem file:// Protokoll bedeutet, dass Sie auf alle Dateien auf dem Computer des Benutzers zugreifen können, ohne dass der Benutzer weiß, was ein großes Sicherheitsrisiko darstellt.

Wie Dimitar Bonev sagte, können Sie können auf eine Datei zugreifen, wenn der Benutzer sie mit einem eigenen Dateiauswähler 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.

7
Holger Just

Bin vor einiger Zeit auf dieses Problem gestoßen. Die Website konnte aufgrund der Sicherheitseinstellungen (wirklich verständlich) nicht auf die Videodatei auf dem lokalen PC zugreifen. Die einzige Möglichkeit, die ich umgehen konnte, bestand darin, einen Webserver auf dem lokalen PC (server2Go) zu betreiben und alle Verweise auf die Videodatei aus dem Web 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.

7
jcoshea