2016-03-08 21 views
5

Youtube có tính năng này mát mẻ, nơi bạn có thể 'cọ rửa' thông qua video và họ cung cấp cho bạn cái nhìn thumbnail của video tại mỗi giây:được một hình ảnh của khung của một video tại mỗi giây

enter image description here

Có ai biết làm thế nào để đạt được điều này? Liệu các máy chủ phải gửi qua từng hình ảnh riêng lẻ, hoặc họ có thể được trích xuất từ ​​video trên máy khách với javascript?

Về việc triển khai "trích xuất", tôi bị mất một chút, nhưng tôi tưởng tượng một phần tử canvas có thể được sử dụng để vẽ khung hình sau khi được trích xuất.

Nếu máy chủ phải được sử dụng: vì hình ảnh nhỏ, tôi tưởng tượng tôi có thể sử dụng sprites, nhưng nếu chúng ta đang nói về mỗi giây của video, thì tệp đó có thể khá lớn. (vẫn nhỏ so với dữ liệu video mà tôi giả sử, nhưng không chính xác tối ưu)

+0

Có một ngàn cách khác nhau của bạn có thể đạt được điều này, chọn một, sau đó lại đặt câu hỏi. –

+0

Tôi chỉ có thể thụ thai 2. (những cái tôi đã nêu). Tôi không chắc liệu điều này có khả thi hay không vì tôi không thể nghĩ ra cách để thực hiện nó. Tôi thích nó hơn mặc dù trước đây, nếu có thể, vì lý do rõ ràng. – LukeP

+0

@AdamBuchananSmith Về những nỗ lực trong việc thực hiện sau này. Tôi có một vài ý tưởng (loại mơ hồ), hãy để tôi thêm chúng vào câu hỏi. – LukeP

Trả lời

1

tl; dr sprite sprite sheets, tải xuống khi cần.

Chúng tôi có thể đoán rằng hình ảnh được tạo phía máy chủ. YouTube xử lý dữ dội hơn trên mọi video hơn là kéo một vài hình thu nhỏ. Ngoài ra, Google nhanh chóng đề xuất tính năng này đã tồn tại trong vài năm - có thể dài hơn công suất HTML5/JS/trình duyệt cần thiết để thực hiện phía máy khách này.

Tôi đã truy cập Download Tools > Resources trong trình duyệt của mình và đã xem newly-posted video từ nguồn cấp dữ liệu của tôi. Thật thú vị, chưa có bản xem trước nào (video chỉ tăng khoảng 20 phút khi tôi kiểm tra). Điều này cho thấy hình ảnh có thể được tạo phía máy chủ và chưa hoàn tất quá trình xử lý.

Kiểm tra an older video và xem Resources > Images không tiết lộ bất kỳ điều gì thú vị. Vì vậy, tôi đã chuyển sang Timelines và đạt kỷ lục, sau đó bắt đầu di chuột qua dòng thời gian và xem lưu lượng truy cập mạng. Như tôi đã di chuyển chuột, *.jpg file bắt đầu tải, và chúng chứa 25 hình thu nhỏ từ một bộ phận nhất định của video:

example youtube scrubbing preview sprite sheet

Tôi cũng nhận thấy rằng các tập tin ban đầu M0.jpg là hình ảnh kích thước tương tự, nhưng chứa khoảng 100 hình thu nhỏ từ trên toàn bộ video, thay vì 25 hình thu nhỏ từ một phân đoạn. Ví dụ:

example overview M0.jpg file

kiểm tra một lần nữa với một video mới, nó trông giống như hình ảnh 100 M0.jpg được tải về đầu tiên và cung cấp dưới dạng thumbnail cơ bản-res thấp hơn ít hạt. Sau đó, khi bạn di chuột qua các phần khác nhau của video, mức độ cao hơn M0.jpg, M1.jpg, v.v ... được tải xuống khi cần.

Điều thú vị là điều này không thay đổi đối với longer videos, điều này giải thích lý do tại sao các hình thu nhỏ đôi khi có thể hút. Nếu kết nối của bạn hoặc YouTube quá chậm để có hình thu nhỏ có độ phân giải cao hơn thì bạn sẽ bị kẹt với chỉ 100 hình thu nhỏ có độ phân giải thấp của video thực sự dài. Bạn không chắc chắn cách thức hoạt động của video ngắn hơn.Ngoài ra, nó có thể là thú vị để xem những gì phân phối họ kéo hình thu nhỏ từ (là nó chỉ tuyến tính mỗi 1/100th của video? Hoặc cái gì khác).

Tidbit cuối cùng, là tôi nhận thấy nếu bạn sử dụng url có mã thời gian trong đó, bạn sẽ không nhận được tờđầy đủ 100 hình ảnh mà là một kích thước hoàn toàn khác nhau M#.jpg chứa khoảng 25 hình thu nhỏ có độ phân giải thấp từ mã thời gian đến cuối video.

subset of thumbnails for timecoded video

Tôi đoán họ đang giả định rằng khi người ta liên kết đến một timecode cụ thể, người sử dụng không có khả năng để chuyển đến một điểm trước đó trong đoạn video. Ngoài ra, đây là cách ít chi tiết hơn ~ 75 hình ảnh bạn sẽ nhận được bằng cách gửi 100 hình ảnh bình thường M0.jpg. Mặt khác, nó cũng khoảng 30% kích thước, vì vậy có lẽ tốc độ là quan trọng.

Như để tạo ra các hình nhỏ, ffmpeg là một cách tốt để đi:

Để thực hiện nhiều ảnh chụp màn hình và đặt chúng vào một tập tin hình ảnh duy nhất (tạo gạch), bạn có thể sử dụng bộ lọc ngói Video FFmpeg, như này:

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

Điều đó sẽ tìm cách 10 giây vào bộ phim, chọn mỗi khung 1000, quy mô nó để 320x240 pixel và tạo gạch 2x3 trong out.png hình ảnh đầu ra, mà sẽ trông như thế này:

tile image from ffmpeg

Các vấn đề liên quan