Riproduci file video locale (disco rigido) con tag video HTML5?

Voglio ottenere quanto segue.

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

L'intento è che l'utente possa selezionare un file dal proprio disco rigido.

E il motivo per non caricare è ovviamente i costi di trasmissione e la quota di archiviazione. Non ci sarà alcun motivo per salvare il file.

È possibile?

È possibile riprodurre un file video locale.

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

Quando un file viene selezionato tramite l' inputelemento:

1. viene generato l'evento "change"
2. Ottieni il primo oggetto File da input.files FileList
3. Crea un URL oggetto che punti all'oggetto File
4. Imposta l'URL dell'oggetto sulla video.srcproprietà

5. Rilassati e guarda :)

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>

Ciò sarà possibile solo se il file HTML viene caricato anche con il fileprotocollo dal disco rigido dell'utente locale.

Se la pagina HTML è servita da HTTP da un server, non è possibile accedere a nessun file locale specificandoli in un srcattributo con il file://protocollo poiché ciò significherebbe che è possibile accedere a qualsiasi file sul computer dell'utente senza che l'utente sappia quale sarebbe un enorme rischio per la sicurezza.

Come ha detto Dimitar Bonev, puoi accedere a un file se l'utente lo seleziona utilizzando un selettore di file da solo. Senza questo passaggio, è vietato da tutti i browser per buone ragioni. Pertanto, sebbene la sua risposta possa rivelarsi utile per molte persone, allenta i requisiti dal codice nella domanda originale.

Mi sono imbattuto in questo problema qualche tempo fa. Il sito Web non poteva accedere al file video sul PC locale a causa delle impostazioni di sicurezza (comprensibile in realtà) L'UNICO modo in cui potevo aggirare il problema era eseguire un server Web sul PC locale (server2Go) e tutti i riferimenti al file video dal Web erano al 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-->

Non è una soluzione ideale ma ha funzionato per me.