2016-03-08 14 views
5

Youtube ein Bild des Rahmens eines Videos bekommen hat diese coole Funktion, wo man kann ‚schrubben‘ durch das Video, und sie geben Ihnen die Miniaturansicht des Videos an jedem zweiten:bei jedem zweiten

enter image description here

Weiß jemand, wie das erreicht wird? Muss der Server jedes Bild einzeln senden oder kann es mit Javascript aus dem Video auf dem Client-Rechner extrahiert werden?

In Bezug auf die Implementierung der "Extraktion" bin ich ein wenig verloren, aber ich stelle mir vor, ein canvas Element könnte verwendet werden, um die Frames einmal extrahiert zu zeichnen.

Wenn der Server verwendet werden muss: Da die Bilder klein sind, stelle ich mir vor, ich könnte Sprites verwenden, aber wenn wir über jede Sekunde des Videos sprechen, dann könnte diese Datei ziemlich groß werden. (immer noch klein im Vergleich zu den Videodaten, aber nicht optimal)

+0

Es gibt tausend verschiedene Art und Weise die Sie dies erreicht werden, einen auswählen, dann die Frage erneut stellen. –

+0

Ich kann nur 2. (die ich skizziert) konzipieren. Ich bin mir nicht sicher, ob Letzteres machbar ist, weil ich mir keinen Weg vorstellen kann, es umzusetzen. Ich würde es dem ersten vorziehen, wenn möglich, aus offensichtlichen Gründen. – LukeP

+0

@AdamBuchananSmith In Bezug auf Versuche zur Umsetzung der letzteren. Ich habe ein paar (vage) Ideen, lass mich sie zu der Frage hinzufügen. – LukeP

Antwort

1

tl; dr Server erzeugt Blätter Sprite, je nach Bedarf heruntergeladen.

Wir können raten gehen, dass die Bilder serverseitig generiert werden. YouTube verarbeitet auf jedem Video viel intensiver als einige Thumbnails zu ziehen. Auch eine schnelle Google schlägt vor, diese Funktion gibt es seit ein paar Jahren - wahrscheinlich länger als die erforderlichen HTML5/JS/Browser-Pferdestärken, um diese Client-Seite zu tun.

Ich schlug Download Tools > Resources in meinem Browser und überprüfte eine newly-posted video aus meinem Feed. Interessanterweise gab es noch keine Vorschauen (das Video war nur etwa 20 Minuten lang beim Überprüfen). Dies zeigt an, dass die Bilder wahrscheinlich serverseitig generiert wurden und die Verarbeitung noch nicht abgeschlossen ist.

Überprüfung an older video und Blick auf Resources > Images ergab nichts Interessantes. Also wechselte ich zu Timelines und traf die Aufnahme, dann begann ich über die Zeitleiste zu mogeln und auf Netzwerkverkehr zu achten. Als ich die Maus bewegt, begann Laden *.jpg Dateien, und sie enthielt 25 Thumbnails aus einem bestimmten Abschnitt des Videos:

example youtube scrubbing preview sprite sheet

Ich habe auch bemerkt, dass die ursprüngliche Datei M0.jpg die gleiche Größe Bild, sondern enthält etwa 100 Thumbnails über das gesamte Video statt 25 Thumbnails aus einem Segment. Beispiel:

example overview M0.jpg file

Testing wieder mit einem neuen Video, es sieht aus wie das 100-Bild M0.jpg zuerst heruntergeladen wird und liefert die grundlegende niedrige Auflösung weniger körnige Miniaturansichten. Wenn Sie dann verschiedene Videoabschnitte über den Mauszeiger bewegen, werden die höheren Werte M0.jpg, M1.jpg usw. nach Bedarf heruntergeladen.

Interessanterweise ändert sich das nicht für longer videos, was erklärt, warum die Thumbnails manchmal saugen können. Wenn deine Verbindung oder YouTube zu langsam ist, um die höher aufgelösten Thumbnails zu erhalten, dann bleibst du mit nur 100 niedrig aufgelösten Thumbnails eines wirklich langen Videos stecken. Nicht sicher, wie das bei kürzeren Videos funktioniert.Es könnte auch interessant sein zu sehen, von welcher Distribution sie die Vorschaubilder ziehen (ist es nur linear jedes 1/100 des Videos? Oder etwas anderes).

Last tidbit, ist ich aufgefallen, wenn Sie eine URL mit einem Timecode in ihm verwenden, Sie nicht über ein volles 100-Bild M0.jpg Blatt bekommen, sondern eine ganz andere Größe M#.jpg etwa 25 Low-Res-Thumbnails aus dem Timecode enthält, bis zum Ende des Videos.

subset of thumbnails for timecoded video

Ich denke, sie gehen davon aus, dass, wenn die Leute zu einem bestimmten Timecode verknüpfen, wird die Benutzer nicht wahrscheinlich zu einem frühen Zeitpunkt im Video zu springen. Dies ist weit weniger Granularität als die ~ 75 Bilder, die Sie bekommen hätten, wenn Sie das normale 100-Bild M0.jpg gesendet haben. Auf der anderen Seite, es ist auch etwa 30% der Größe, vielleicht war Geschwindigkeit so wichtig.

Wie für die Thumbnails zu erzeugen, ist ffmpeg ein guter Weg zu gehen:

Um mehrere Screenshots zu machen und sie in eine einzige Bilddatei platzieren (Erstellen von Kacheln), können Sie FFmpegs Fliese Videofilter verwenden, wie dies:

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

10 Sekunden in den Film suchen wird, jedes 1000. Rahmen auswählen, skalieren zu 320x240 Pixel und 2x3 Kacheln in dem Ausgabebild out.png erstellen, die wie folgt aussehen:

tile image from ffmpeg

Verwandte Themen