Czy odtworzyć lokalny (na dysku twardym) plik wideo z tagiem wideo HTML5?

89

Chcę osiągnąć co następuje.

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

Chodzi o to, aby użytkownik mógł wybrać plik ze swojego dysku twardego.

Powodem nieprzesyłania są oczywiście koszty transmisji i limit miejsca. Nie będzie powodu, aby zapisywać plik.

Czy to możliwe?

Chris
źródło
Na pewno nie zadziała z wejściem do pliku. Może działać z ondropem HTML5, ale nie sądzę, abyś mógł to wykorzystać do przesyłania plików. Najlepszym rozwiązaniem byłoby prawdopodobnie zrobienie rozszerzenia do Chrome.
Brian Nickel

Odpowiedzi:

241

Możliwe jest odtworzenie lokalnego pliku wideo.

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

Gdy plik jest wybrany poprzez inputelement:

  1. uruchamiane jest zdarzenie „zmiana”
  2. Pobierz pierwszy obiekt File z input.files FileList
  3. Utwórz adres URL obiektu wskazujący na obiekt File
  4. Ustaw adres URL obiektu na video.srcwłaściwość
  5. Odchyl się i oglądaj :)

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

Dimitar Bonev
źródło
To działa dla mnie w Chrome na Macu. Nie działa z safari 6.1
Patrick Cullen
1
Wygląda na to, że są znane problemy z safari: stackoverflow.com/questions/19088400/… i bugs.webkit.org/show_bug.cgi?id=101671
Patrick Cullen
Doskonałe rozwiązanie, działa również w przeglądarce Chrome na Windows.
JT Taylor,
Czy ktoś wykonał pracę, aby wyświetlić i wyrzucić odpowiednie fragmenty wideo, aby nie zabijać pamięci przeglądarki w przypadku dużych filmów?
Eric Bloch
Nie można wyświetlić podglądu plików .mov lub .avi.
Zadano
11

Będzie to możliwe tylko wtedy, gdy plik HTML zostanie również załadowany fileprotokołem z dysku twardego użytkownika lokalnego.

Jeśli strona HTML jest obsługiwana przez HTTP z serwera, nie możesz uzyskać dostępu do żadnych plików lokalnych, określając je w srcatrybucie z file://protokołem, ponieważ oznaczałoby to, że możesz uzyskać dostęp do dowolnego pliku na komputerze użytkownika bez wiedzy użytkownika, który będzie ogromne zagrożenie bezpieczeństwa.

Jak powiedział Dimitar Bonev, możesz uzyskać dostęp do pliku, jeśli użytkownik wybierze go samodzielnie za pomocą selektora plików. Bez tego kroku jest to zabronione przez wszystkie przeglądarki z ważnych powodów. Tak więc, chociaż jego odpowiedź może okazać się przydatna dla wielu osób, rozluźnia to wymaganie z kodu w pierwotnym pytaniu.

Holger Just
źródło
Rozwiązanie Dimitrova Boneva pokazuje, że to rozwiązanie jest niepoprawne - możesz uzyskać dostęp do plików lokalnych poprzez typ wejściowy = plik.
JT Taylor,
1
Cóż, jego rozwiązanie działa tylko wtedy, gdy najpierw pozwolisz użytkownikowi wybrać plik. Nadal nie możesz nazwać ścieżki do pliku w źródle HTML (jak stwierdzono w pytaniu) i uzyskać do niego dostęp w ten sposób. Tak więc jego rozwiązanie jest technicznie innym pytaniem.
Holger Just
Odtwarzacz vlc może również odtwarzać dowolny plik na komputerze, ale istnieje również zagrożenie bezpieczeństwa. Może pobierać pliki z naszego dysku twardego na swoje serwery bez naszego powiadomienia, jeśli tego chcą, prawda? Dlaczego więc nie ma zagrożenia bezpieczeństwa? W najgorszym przypadku użytkownik może zaakceptować ręcznie, jeśli zezwoli przeglądarce na odtworzenie pliku. Ponieważ są sytuacje, w których użytkownik w 100% ufa stronie, ponieważ to użytkownicy pracują w tej samej firmie, co twórcy stron internetowych.
Darius.V
6

Niedawno wpadłem na ten problem. Witryna nie mogła uzyskać dostępu do pliku wideo na lokalnym komputerze ze względu na ustawienia bezpieczeństwa (naprawdę zrozumiałe). TYLKO sposób, w jaki mogłem to obejść, to uruchomienie serwera internetowego na lokalnym komputerze (server2Go), a wszystkie odniesienia do pliku wideo z sieci WWW dotyczyły 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-->

Nie jest to idealne rozwiązanie, ale zadziałało dla mnie.

jcoshea
źródło
2
Jeśli skopiujesz plik do lokalizacji pamięci podręcznej i ustawisz do niego ścieżkę źródła wideo, będzie on odtwarzany. Skopiuj plik do context.getExternalCacheDir (). GetAbsolutePath (). Pracuje dla mnie.
Derek Wade
również może zrobić z dowolnym serwerem sieciowym w komputerze użytkownika, takim jak apache lub mangusta
Darius.V