每秒获取视频帧的图像

6

Youtube有一个很酷的功能,可以通过“刮动”视频并在每秒钟给您视频的缩略图视图:

enter image description here

有人知道这是如何实现的吗?服务器是否必须逐个发送每个图像,还是可以使用javascript从客户端机器上提取视频中的图像?

关于“提取”的实现,我有点迷失,但我想可以使用canvas元素在提取后绘制帧。

如果必须使用服务器:由于图像很小,我想我可以使用雪碧图,但如果我们谈论每秒钟的视频,则该文件可能会变得非常大。(相对于视频数据仍然很小,但不太理想)


有许多不同的方法可以实现这个目标,选择其中一种,然后重新提问。 - Adam Buchanan Smith
我只能想到两种方案(就是我概述的那两种)。我不确定后者是否可行,因为我想不出实现它的方法。如果可能的话,出于明显的原因,我更喜欢后者。 - Luke
@AdamBuchananSmith 关于后者实现的尝试。我有一些(有点模糊)的想法,让我把它们添加到问题中。 - Luke
2个回答

3

简而言之,服务器生成精灵图,并在需要时下载。

我们可以猜测这些图片是在服务器端生成的。YouTube对每个视频进行的处理比提取几个缩略图要复杂得多。另外,快速的谷歌搜索表明,这个功能已经存在了几年,可能比客户端所需的HTML5 / JS / 浏览器性能更长时间。

我在浏览器中点击了下载工具 > 资源,并查看了我的订阅中的一个新发布的视频。有趣的是,在我检查时还没有预览图(该视频仅上线约20分钟)。这表明这些图像可能是在服务器端生成的,只是尚未完成处理。

检查一段旧视频并查看资源 > 图像没有发现任何有趣的东西。所以我切换到时间轴并开始录制,然后开始在时间轴上移动鼠标并观察网络流量。当我移动鼠标时,*.jpg文件开始加载,它们包含了来自视频特定部分的25个缩略图:

example youtube scrubbing preview sprite sheet

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

example overview M0.jpg file

使用新视频进行测试后,看起来首先下载了包含基本低分辨率缩略图预览的100张图像M0.jpg,然后当您将鼠标悬停在视频的不同部分时,会根据需要下载更高分辨率的M0.jpgM1.jpg等。

有趣的是,对于更长的视频,这种情况并未改变,这就解释了为什么缩略图有时会很糟糕。如果您的连接或YouTube获取高分辨率缩略图速度过慢,则只能获得一个非常长的视频的100个低分辨率缩略图。不确定在较短的视频上如何运作。此外,看一下他们从哪里提取缩略图可能会很有趣(它是否只是每100分之一的视频线性分布?还是其他什么)。

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

subset of thumbnails for timecoded video

我猜他们假设当人们链接到特定的时间码时,用户不太可能跳到视频中较早的时间点。此外,这比发送正常的100张图像M0.jpg要少得多,只有大约25张左右的图像。另一方面,它也只有原来大小的30%,因此速度可能非常重要。
至于生成缩略图,ffmpeg是一个不错的选择:
要制作多个屏幕截图并将它们放置在单个图像文件中(创建平铺),您可以使用FFmpeg的平铺视频过滤器,例如:
``` ffmpeg -ss 00:00:10 -i movie.avi -frames 1 -vf "select=not(mod(n\,1000)),scale=320:240,tile=2x3" out.png ```
这将在电影中寻找10秒钟,选择每1000帧,将其缩放为320x240像素,并在输出图像out.png中创建2x3个平铺,看起来像这样: tile image from ffmpeg

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接