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缩略图。

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

回答：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()替换为图像加载后所需执行的代码。

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

1 个答案: