2012-01-16 25 views
62

Voglio ottenere quanto segue.Riproduci file video (disco rigido) locale con tag video HTML5?

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

L'intento è che l'utente sia in grado di selezionare un file dal proprio disco rigido.

E il motivo del mancato caricamento è ovviamente costi di trasmissione e quota di archiviazione. Non ci sarà alcun motivo per salvare il file.

È possibile?

+0

Non funzionerà sicuramente con un input di file. Potrebbe funzionare con HTML5 ondrop, ma non penso che tu possa sfruttare questo per il caricamento di un file. La tua migliore scommessa sarebbe probabilmente quella di fare un'estensione di Chrome. –

risposta

182

È possibile riprodurre un file video locale.

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

Quando si seleziona un file tramite l'elemento input:

  1. evento 'cambiamento' è sparato
  2. Prendi il primo File oggetto dalla input.filesFileList
  3. Fai object URL che punta a l'oggetto File
  4. Impostare l'URL dell'oggetto sulla proprietà video.src
  5. magra indietro e guardare :)

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

+4

Cappello spento. Fantastico! – chris

+0

+1 internets, bene signore. Proprio quello che stavo cercando. – richo

+0

Pure Awesomeness! – Jim

5

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

Se la pagina HTML viene servita da HTTP da un server, non è possibile accedere ai file locali specificandoli in un attributo src con il protocollo file:// poiché ciò significherebbe che è possibile accedere a qualsiasi file sul computer degli utenti senza l'utente sapendo quale sarebbe un enorme rischio per la sicurezza.

Come ha detto Dimitar Bonev, è possibile accedere a un file se l'utente lo seleziona utilizzando un selettore di file per conto proprio. Senza quel passaggio, è vietato da tutti i browser per buoni motivi. Quindi, mentre la sua risposta potrebbe rivelarsi utile per molte persone, allenta il requisito dal codice nella domanda originale.

+0

La soluzione di Dimitrov Bonev mostra che questa soluzione non è corretta: è possibile accedere ai file locali tramite input type = file. –

+0

Bene, la sua soluzione funziona solo se l'utente seleziona prima il file.Non è ancora possibile assegnare un nome al percorso del file nel codice sorgente HTML (come indicato nella domanda) e accedervi in ​​questo modo. Quindi, la sua soluzione è tecnicamente per un'altra domanda. –

+0

Il lettore VLC può anche riprodurre qualsiasi file sul computer, ma c'è anche un rischio per la sicurezza. Può scaricare file dal nostro disco fisso sui loro server senza che noi se ne accorgano, non è così? Quindi, perché non ci sono quindi rischi per la sicurezza? Nel peggiore dei casi, l'utente può essere autorizzato ad accettare manualmente se consente al browser di riprodurre il file. Perché ci sono situazioni in cui gli utenti si fidano al 100% della pagina, perché gli utenti sono quelli che lavorano nella stessa società dei creatori di siti web. –

6

Ran per questo problema qualche tempo fa. Il sito Web non ha potuto accedere al file video sul PC locale a causa delle impostazioni di sicurezza (davvero comprensibile) SOLO il modo in cui potevo girarlo 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 lavorato per me.

+2

Se copi il file in una posizione cache e imposti il ​​percorso della sorgente video, verrà riprodotto. Copia il file in context.getExternalCacheDir(). GetAbsolutePath(). Per me va bene. –

+0

può anche fare con qualsiasi server web nel computer degli utenti come apache o mangusta –

Problemi correlati