2016-03-08 10 views
5

Youtube ha questa caratteristica interessante dove si puo 'macchia' attraverso il video e ti danno la vista miniatura del video in ogni secondo:avere un quadro del fotogramma di un video ogni secondo

enter image description here

Qualcuno sa come si raggiunge questo risultato? Il server deve inviare su ogni immagine singolarmente o possono essere estratti dal video sul computer client con javascript?

Per quanto riguarda l'implementazione dell '"estrazione", sono un po' perso, ma immagino che un elemento canvas possa essere utilizzato per disegnare i frame una volta estratti.

Se il server deve essere utilizzato: poiché le immagini sono piccole, immagino che potrei usare gli sprite, ma se stiamo parlando di ogni secondo di video, quel file potrebbe diventare piuttosto grande. (ancora piccolo rispetto ai dati video suppongo, ma non esattamente ottimale)

+0

C'è un modo diverso mille si può raggiunto questo, scegliere uno, poi ri-fare la domanda. –

+0

Posso solo concepire 2. (quelli che ho delineato). Non sono sicuro che quest'ultimo sia fattibile perché non riesco a pensare a un modo per attuarlo. Lo preferirei al primo caso, se possibile, per ovvi motivi. – LukeP

+0

@AdamBuchananSmith Riguardo ai tentativi di implementazione di quest'ultimo. Ho un paio di idee (specie di vaghe), permettetemi di aggiungerle alla domanda. – LukeP

risposta

1

tl; generati dal server fogli sprite dr, scaricato, se necessario.

Possiamo indovinare che le immagini vengono generate lato server. YouTube esegue un'elaborazione molto più intensa su tutti i video rispetto al trascinamento di alcune miniature. Inoltre, un rapido suggerimento di Google è che questa funzione è in circolazione da alcuni anni, probabilmente più lunga della potenza HTML5/JS/browser richiesta per eseguire questa parte del client.

Ho colpito Download Tools > Resources nel mio browser e ho controllato uno newly-posted video dal mio feed. È interessante notare che non c'erano ancora anteprime (il video era solo per circa 20 minuti quando ho controllato). Questo indica che le immagini sono probabilmente generate lato server e non hanno ancora terminato l'elaborazione.

Controllare an older video e guardare Resources > Images non ha rivelato nulla di interessante. Così sono passato a Timelines e ho registrato il record, quindi ho avviato il mouse sulla timeline e guardato il traffico di rete. Come ho spostato il mouse, *.jpg file iniziato il caricamento, e contenevano 25 miniature da una determinata sezione del video:

example youtube scrubbing preview sprite sheet

Ho anche notato che il file iniziale M0.jpg è la stessa immagine dimensioni, ma contiene circa 100 miniature di tutto il video, piuttosto che 25 miniature da un segmento. Esempio:

example overview M0.jpg file

prova di nuovo con un nuovo video, sembra che il 100-immagine M0.jpg viene scaricato prima e fornisce le anteprime in miniatura di base inferiori-res meno granulari. Quindi, mentre passi sopra diverse sezioni del video, le risoluzioni più elevate M0.jpg, M1.jpg, ecc. Vengono scaricate secondo necessità.

È interessante notare che questo non cambia per longer videos, il che spiega il motivo per cui le miniature a volte possono essere utilizzate. Se la tua connessione o YouTube è troppo lento per ottenere le miniature ad alta risoluzione, allora rimani bloccato con solo 100 miniature a bassa risoluzione di un video molto lungo. Non sei sicuro di come funzioni su video più brevi.Inoltre, potrebbe essere interessante vedere da quale distribuzione estraggono le miniature (è solo lineare ogni 1/100 ° del video? O qualcos'altro).

Ultima bocconcino, è ho notato se si utilizza un URL con un codice di tempo in esso, non si ottiene un pieno 100-immagine M0.jpg fogli, ma piuttosto una dimensione completamente diversa M#.jpg contenente circa 25 miniature a bassa risoluzione dal codice di tempo alla fine del video.

subset of thumbnails for timecoded video

immagino che stanno assumendo che quando la gente dei collegamenti a un codice di tempo specifico, gli utenti non sono suscettibili di passare a un punto precedente nel video. Inoltre, questo è molto meno granulare delle ~ 75 immagini che avresti ottenuto inviando la normale immagine 100 M0.jpg. D'altra parte, è anche circa il 30% delle dimensioni, quindi forse la velocità era così importante.

Per quanto riguarda la generazione delle miniature, ffmpeg è un buon modo per andare:

Per rendere più screenshot e metterli in un unico file di immagine (la creazione di piastrelle), è possibile utilizzare il filtro di piastrelle il video di FFmpeg, come questo:

ffmpeg -ss 00:00:10 -i movie.avi -frames 1 -vf "select=not(mod(n\,1000)),scale=320:240,tile=2x3" out.png

che cercherà di 10 secondi nel filmato, selezionare ogni fotogramma 1000i, scala a 320x240 pixel e creare piastrelle 2x3 nel out.png immagine di output, che sarà simile a questa:

tile image from ffmpeg

Problemi correlati