javascript - 使用JS检查是否加载了YouTube缩略图

Question

我们使用BBC Wraith为我们的网站设置了视觉回归测试。如果网页未嵌入youtube视频，则一切正常。如果页面嵌入了某个页面，则有时WRAITH会在加载YouTube缩略图之前为该页面截图。当然，我们可以延长Wraith的超时时间，以使这些页面等待更长的时间，以增加缩略图已经存在的机会-但可能会有更好的解决方案。

因此，我们想了解是否有办法找出YouTube缩略图是否已加载。

由于同源政策，我们无法使用JS访问YouTube iframe。

更新:
我尝试使用YouTube iFrame API(https://developers.google.com/youtube/iframe_api_reference?hl=en#Events)，并使用了onReady-Event。当播放器准备好接收API调用时触发该事件，但这似乎不需要加载缩略图。

还有其他想法吗？ (例如，检查浏览器是否从youtube加载了特定资源等)。

谢谢。

Answer 1

如果我对您的理解正确，则需要知道YouTube缩略图的加载时间。

如果是这样，您可以使用以下代码-改编自:

Answer to: JavaScript: Know when an image is fully loaded

$().ready(function() {

  $('img#youTubeVideoThumbnail').attr('src', 'https://i.ytimg.com/vi/wtKIVArS17w/hqdefault.jpg')
    .load(function() {
      alert('Image Loaded');
    })
    .error(function() {
      alert('Error Loading Image');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<img id="youTubeVideoThumbnail" />

在前面的代码中，在加载缩略图时检测到该错误，然后显示一个JavaScript警报。

使用的缩略图来自此视频 Soweto。

加载图像后，可以将 alert()替换为需要执行的代码。