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

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?

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/

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

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.

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.