HTML 5 Video, Streaming/Buffering solo una parte specifica di un video più lungo

Question

Abbiamo una lunga porzione di video, lunga fino a 1 ora. Vogliamo mostrare agli utenti piccoli pezzi di 30 secondi di questo video. È imperativo che il video non balballi in nessun punto.

L'utente non può quindi saltare il resto del video, vedono solo il chunk di 30 secondi.

Un esempio potrebbe essere, una partita di calcio, l'intera partita è in video ma facendo clic su un pulsante in un'altra pagina si carica il video completo e si gioca solo un obiettivo.

Ciò è possibile con HTML5 Video? Avrebbe qualcosa a che fare con TimeRanges? Il video deve essere servito su un protocollo di streaming puro? Possiamo bufferizzare il blocco completo di 30 secondi prima di riprodurlo?

L'obiettivo è ridurre il flusso di lavoro necessario per ritagliare tutti i piccoli spezzoni (e il tempo trascodificarli in tutti i diversi formati video HTML 5), possiamo semplicemente lanciare un pezzo di filmato codificato e invia l'utente a una sezione di quel filmato.

I vostri pensieri e contributi sono i benvenuti, grazie!

Answer 1

A questo punto nel tempo i video HTML5 sono un vero e proprio PITA - non abbiamo alcuna reale API per controllare il buffer del browser, di conseguenza, essi tendono a balbettare su connessioni più lente, come i browser cercano di tamponare in modo intelligente, ma di solito fai esattamente il contrario.

Inoltre, se si desidera solo che i propri utenti visualizzino una particolare porzione di video di 30 secondi (presumo che sarebbe il tuo modo di forzare gli utenti ai registri per visualizzare i video completi), HTML5 non è la scelta giusta - sarebbe incredibilmente semplice abusare del tuo sistema.

In questo caso, ciò di cui hai veramente bisogno è un discreto Flash Player e un Media Server nel back-end, quando hai il pieno controllo.

Answer 2

Si potrebbe fare un po 'di questo, ma poi si sarebbe soggetti al buffer del browser stesso. (Inoltre, non è possibile impedirlo dal buffering oltre X sec) Miglior risultato, si potrebbe facilmente avere un controllo di ricerca personalizzato per limitare gli intervalli e interrompere il video quando viene raggiunto il blocco di 30 secondi.

Inoltre, il buffering non è qualcosa che è possibile controllare altri dire al browser di non farlo. Il resto è automatico e il supporto per forzare un buffer completo è stato rimosso dalle specifiche.

In ogni caso, solo facendoti sapere che questa è una pratica terribile e potrebbe essere fatto, ma si sarà potenzialmente in esecuzione su molti problemi. Puoi sempre usare un servizio come Zencoder per gestire anche la transcodifica. Un'altra alternativa sarebbe quella di avere ffmpeg o altri software sul server per gestire il clipping e la transcodifica.

Answer 3

È possibile impostare l'ora utilizzando javascript (proprietà currentTime del video).

Nel caso in cui si desidera un costume SeekBar si può fare qualcosa di simile:

<input type="range" step="any" id="seekbar"> 

var seekbar = document.getElementById('seekbar'); 
function setupSeekbar() { 
seekbar.max = video.duration; 
} 
video.ondurationchange = setupSeekbar; 
function seekVideo() { 
    video.currentTime = seekbar.value; 
} 
function updateUI() { 
    seekbar.value = video.currentTime; 
} 
seekbar.onchange = seekVideo; 
video.ontimeupdate = updateUI; 

function setupSeekbar() { 
    seekbar.min = video.startTime; 
    seekbar.max = video.startTime + video.duration; 
} 

Se il video è in streaming è necessario "calcola" il tempo "fine".

var lastBuffered = video.buffered.end(video.buffered.length-1); 
function updateUI() { 
    var lastBuffered = video.buffered.end(video.buffered.length-1); 
    seekbar.min = video.startTime; 
    seekbar.max = lastBuffered; 
    seekbar.value = video.currentTime; 
}