javascript - 动态修改 YouTube 自动生成的缩略图 API v2.0

Question

据我所知，我们可以为每个视频选择 4 个自动生成的 YouTube 缩略图。有时，由于原始视频的宽高比，这些缩略图包含黑条。有什么办法可以先修改一下，然后再将修改后的镜像推送到客户端吗？

这些缩略图的目的是为了网站上的视频搜索结果列表。而不是作为嵌入式播放器

理想情况下，我不希望将这些缩略图存储在服务器上。

目前正在考虑这种可能性 solution ，赏金可用!

Answer 1

有多种可能的解决方案，每种方案都有其优点和缺点。请注意，这些都是基于 CSS/Javascript 的，因为 YouTube API 不报告视频方面、图像方面等。

1) 您链接到的解决方案可以工作，将缩略图设置为元素的背景图像，使背景图像居中，然后显式设置元素的高度和宽度。

<div style=”width: 120px; height:51px; background: url(https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg) center no-repeat; background-size:120px 67px;”></div>

这种解决方案的最大缺点是，您随后在页面上创建了很多空元素，只是为了获取背景图像，并且必须使用 javascript 将图像设置为背景(除非您的 CSS 是动态生成的)通过服务器端进程)，因为它们都是唯一的。如果您需要调整缩略图本身的大小，您还必须设置背景大小属性。

2) 另一种解决方案是让图像正常存在于一个元素中，但将其包装在另一个具有明确大小的元素中，并将溢出设置为隐藏:

<div style=”width:120px;height:51px;overflow:hidden;”>
  <img src=”https://i1.ytimg.com/vi/qV4tiq-w2HM/mqdefault.jpg” style=”margin-top:-8px”/>
</div>

虽然这会更容易自动化，因为它可以纯粹使用 css 类来完成，但它仍然受到许多额外标记的影响，并且必须在其容器内将图像向上移动一点(因此您 trim 顶部和底部酒吧)。

3) 如果您同意图像具有绝对位置(通常效果很好，具体取决于布局的构造方式)，则可以使用 CSS“clip”属性:

<img src="https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg" style=”position:absolute; width: 120px; top:0; clip:rect(8px,120px,59px,0px);”/>

clip 属性构造一个可见的矩形，由上边距、右边距、下边距和左边距表示。非常干净、合理，并且易于编程。但如果您的图像无法绝对定位，则不可能，因此这可能是行不通的。

4) 一个选项的作用与“clip”属性的作用基本相同，但适用范围更广，即使用 Canvas 并在加载缩略图时重新绘制缩略图，从而将裁剪放置到位。像这样的事情:

var context = document.getElementById('myCanvas').getContext('2d');
var imageObj = new Image();
imageObj.src = 'https://i1.ytimg.com/vi/aOPGepdbfpo/mqdefault.jpg';
imageObj.onload = function() {
    context.drawImage(imageObj, 0, 23, 320, 120, 0, 51, 120, 51);
};

在这种情况下，数字参数代表源图像的x位置、源图像的y位置、要查看的源的宽度、要查看的源的高度、x开始重绘的 Canvas 位置、开始重绘的 Canvas 上的 y 位置、新图像的宽度和新图像的高度。如果您正确编写了例程，则可以使用单个 Canvas ，并且只需调用编程方法即可按照您想要的方式绘制每个缩略图。

请记住，所有这些方法都要求您提前知道如何裁剪每个图像。实际上并没有办法从任何 API 调用中判断图像是否会有黑条。如果您使用 Canvas 方法，则可以使用 getimageData() 函数来分析每个图像并搜索黑条，然后根据结果进行裁剪/调整大小。但这确实是另一个问题。

这是一个jsfiddle这演示了我上面概述的不同方法。