javascript - 每秒获取视频帧的图片

标签 javascript html video html5-video

<分区>

Youtube 有这个很酷的功能,您可以在其中“擦洗”视频,它们会每秒为您提供视频的缩略图:

enter image description here

有人知道这是怎么实现的吗?服务器是否必须单独发送每个图像,或者可以使用 javascript 从客户端计算机上的视频中提取它们?

关于“提取”的实现,我有点迷茫,但我想一个 canvas 元素可以用来在提取框架后绘制它们。

如果必须使用服务器:由于图像很小,我想我可以使用 Sprite ,但如果我们谈论的是视频的每一秒,那么该文件可能会变得相当大。 (与我认为的视频数据相比仍然很小,但不是最佳的)

最佳答案

tl;dr 服务器生成 Sprite 表,根据需要下载。

我们可以猜测图像是在服务器端生成的。 YouTube 对每个视频进行的处理比提取一些缩略图要密集得多。此外,Google 快速浏览表明此功能已经存在了几年 - 可能比执行此客户端所需的 HTML5/JS/浏览器马力更长。

我在浏览器中点击Download Tools > Resources 并查看了 newly-posted video从我的饲料。有趣的是,还没有预览(我检查时视频只播放了大约 20 分钟)。这表明图像可能是在服务器端生成的,只是尚未完成处理。

正在检查 an older video查看 Resources > Images 没有发现任何有趣的东西。所以我切换到 Timelines 并点击记录,然后开始将鼠标悬停在时间线上并观察网络流量。当我移动鼠标时,*.jpg 文件开始加载,它们包含给定视频部分的 25 个缩略图:

example youtube scrubbing preview sprite sheet

我还注意到初始文件 M0.jpg 是相同大小的图像,但包含整个视频的大约 100 个缩略图,而不是一个片段的 25 个缩略图。示例:

example overview M0.jpg file

再次测试新视频,看起来 100 幅图像 M0.jpg 首先被下载,并提供基本的低分辨率、低粒度缩略图预览。然后,当您将鼠标悬停在视频的不同部分时,将根据需要下载更高分辨率的 M0.jpgM1.jpg 等。

有趣的是,longer videos 并没有改变,这解释了为什么缩略图有时会很糟糕。如果您的网络连接或 YouTube 获取高分辨率缩略图的速度太慢,那么您将只能看到一个非常长的视频的 100 个低分辨率缩略图。不确定这对较短的视频有何影响。此外,看看他们从什么分布中提取缩略图可能会很有趣(它只是视频的每 1/100 线性吗?还是其他什么东西)。

最后一点,我注意到如果你使用一个带有时间码的 url,你不会得到一个完整的 100 张图像 M0.jpg 工作表,而是一个完全不同的大小 M#.jpg 包含从时间码到视频结尾的大约 25 个低分辨率缩略图。

subset of thumbnails for timecoded video

我猜他们假设当人们链接到特定时间码时,用户不太可能跳到视频中较早的点。此外,这比通过发送普通的 100 张图像 M0.jpg 获得的大约 75 张图像的粒度要小得多。另一方面,它也只有大小的 30% 左右,所以也许速度很重要。

至于生成缩略图,ffmpeg是个好方法:

To make multiple screenshots and place them into a single image file (creating tiles), you can use FFmpeg's tile video filter, like this:

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

That will seek 10 seconds into the movie, select every 1000th frame, scale it to 320x240 pixels and create 2x3 tiles in the output image out.png, which will look like this:

tile image from ffmpeg

关于javascript - 每秒获取视频帧的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35880407/

相关文章:

image - ffmpeg 将一系列图像转换为视频 - 每两帧之间使用交叉淡入淡出或任何其他过渡

video - 使用 ffmpeg 将图像序列转换为视频时颜色困惑

javascript - 使用 iTextSharp 将 javascript 添加到 PDF 中时出现问题

javascript - 向 Google Maps API 调用添加 promise

javascript - HTML 中鼠标跟随的动画图像蒙版

android - 如何使用 ffmpeg 合并两个视频?

javascript - Bcryptjs 异步不工作

javascript - Angularjs ng-repeat列表的自动编号

jquery - 在 jQuery 中添加 Script 标签

javascript - Angular ui 网格,安装和构建