消除YouTube缩略图的黑边

YouTube 嵌入在很久以前得到了改进,方法是移除可能存在的黑色条纹。

然而,这些黑色条纹仍然存在于许多视频的缩略图中。这个问题也能得到解决吗?

3 个赞

关于背景条的特定更改归结为使用 maxresdefault 图像而不是 hqdefault。但并非所有视频都有高分辨率缩略图,因此在这些情况下,我们会回退到 opengraph 图像,这等同于 hqdefault

该图像尺寸具有不同的纵横比,并包含黑色条。但在两种情况下,我们将纵横比固定为 16:9,因此在显示播放器时应看不到黑色条。

这里有一个没有高分辨率图像的视频示例,它使用 这个 作为缩略图。

你能分享一些发生这种情况的例子吗?

3 个赞

当然,感谢您的关注。

以下是两个视频,它们在嵌入时看起来很棒,但在缩略图(以及预览)中显示黑边:

og:image 是:

正如您正确指出的那样……有黑边。

还有

og:image 是:

正如您正确指出的那样……有黑边……

注意:这里有一个“好例子”:

这种情况下的 og:image 要大得多:

我目前正在使用我的“Topic List Previews Sidecar”插件来重新生成缩略图,并使用该插件的定制覆盖:

……但如果在核心中有一种自动化的方法来做到这一点将是很好的,因为必须半手动地不断进行此操作非常令人烦恼。

挑战在于识别哪些图像可以裁剪?

如果您发现 YouTube 图像是 4:3 或低于某个分辨率(这意味着它必须有黑边?),那么强制使用 16:9 是否就可以了?

我想这可能意味着将“optimize image”传递一个标志来告诉它它正在处理 YouTube?

对我来说,YouTube 不将缩略图标准化为 16:9 似乎很奇怪?!也许我错过了什么……

感谢您向我解释尺寸差异!

我现在明白了你的意思,但直接在核心处理图像并不符合我们使用它们的场景。我们不存储这些嵌入的缩略图,而是在需要时直接从 YouTube 获取。

话虽如此,识别哪些图像需要裁剪应该不难。你可以查看这个 URL:

https://img.youtube.com/vi/dsVAzSG6SbM/hqdefault.jpg

maxresdefault

  • 始终是 16:9。
  • 分辨率最高。
  • 并非始终可用。

hqdefault

  • 始终是 4:3。
  • 如果原始视频是 16:9,它会添加黑边。

mqdefault

  • 始终是 16:9。
  • 分辨率比 hqdefault 更低。

虽然有点奇怪,但它们是可以预测的。我猜 4:3 格式是遗留尺寸,他们为了兼容性仍然在使用。

显示 16:9 图像就像修复纵横比一样简单。如果你需要其他纵横比,我认为你可以传递一个标志,并用 CSS 来补偿缩放。

确实,编辑器预览可以改进,但这可以通过与上述类似的方法来完成。

我能看到的唯一一个使用这种方法的边缘情况是竖屏视频的低分辨率缩略图。在这种情况下,不会显示黑边。:man_shrugging:

2 个赞

但是核心在处理(cooking)帖子过程中,会创建并存储自己不同分辨率的派生缩略图吗?

这就是保留黑边的地方。

Bingo!

但无论如何,这些信息都非常有帮助,我或许可以用它们来改进我的插件。非常感谢!

这比询问 GPT-4 Vision 是否有黑边或使用 ImageMagick 来检测它们要直接得多。

1 个赞

Thanks to your insight I’ve updated Topic List Previews with a much simpler solution which doesn’t have to be toggled as it will only crop if the image is a youtube legacy 4:3 thumbnail.

Perhaps this is general enough to be useful to core?

2 个赞