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

86

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?

Chris
quelle
Es funktioniert definitiv nicht mit einer Dateieingabe. Es mag mit HTML5 ondrop funktionieren, aber ich glaube nicht, dass Sie das für einen Datei-Upload nutzen können. Ihre beste Wette wäre wahrscheinlich eine Chrome-Erweiterung.
Brian Nickel

Antworten:

236

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/

Dimitar Bonev
quelle
Das funktioniert bei mir in Chrome auf einem Mac. Funktioniert nicht mit Safari 6.1
Patrick Cullen
1
Anscheinend gibt es bekannte Probleme mit Safari: stackoverflow.com/questions/19088400/… und bugs.webkit.org/show_bug.cgi?id=101671
Patrick Cullen
Ausgezeichnete Lösung, funktioniert auch unter Chrome für Windows.
JT Taylor
Hat jemand die Arbeit erledigt, um geeignete Videoblöcke ein- und auszublenden, um den Browserspeicher für große Videos nicht zu zerstören?
Eric Bloch
Vorschau von .mov- oder .avi-Dateien nicht möglich Die Frage wurde hier gestellt: stackoverflow.com/questions/32599806/…
mpsbhat
11

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.

Holger Just
quelle
Die Lösung von Dimitrov Bonev zeigt, dass diese Lösung falsch ist - Sie können über den Eingabetyp = Datei auf lokale Dateien zugreifen.
JT Taylor
1
Nun, seine Lösung funktioniert nur, wenn Sie den Benutzer zuerst die Datei auswählen lassen. Sie können den Pfad zur Datei in der HTML-Quelle (wie in der Frage angegeben) immer noch nicht benennen und auf diese Weise darauf zugreifen. Somit ist seine Lösung technisch für eine andere Frage.
Holger nur
Der vlc player kann auch jede Datei auf dem Computer abspielen, es besteht jedoch auch ein Sicherheitsrisiko. Es kann Dateien von unserer Festplatte auf ihre Server herunterladen, ohne dass wir es bemerken, wenn sie wollen, oder? Warum besteht dann kein Sicherheitsrisiko? Im schlimmsten Fall kann der Benutzer manuell akzeptieren, wenn er dem Browser erlaubt, die Datei abzuspielen. Weil es Situationen gibt, in denen Benutzer der Seite zu 100% vertrauen, weil Benutzer diejenigen sind, die in derselben Firma wie Web-Ersteller arbeiten.
Darius.V
6

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.

jcoshea
quelle
2
Wenn Sie die Datei an einen Cache-Speicherort kopieren und den Pfad der Videoquelle dazu festlegen, wird sie abgespielt. Kopieren Sie die Datei nach context.getExternalCacheDir (). GetAbsolutePath (). Funktioniert bei mir.
Derek Wade
kann auch mit jedem Webserver im Computer des Benutzers wie Apache oder Mungo
tun