如何检测 YouTube 何时无法加载？答案

【问题标题】：How to detect when the YouTube doesn't load?如何检测 YouTube 何时无法加载？
【发布时间】：2020-12-14 23:29:56
【问题描述】：

我有一个网页，允许用户输入 YouTube 视频 URL 并将它们显示在不自动播放它们的缩略图预览器中。当用户输入网址时：

有些可能是有效的并且可以加载，
有些无效且无法加载，
一些，虽然有效的网址没有嵌入类似于
的网址
https://www.youtube.com/watch?v=NCZaq9pSBxQ 并且不要加载，并且
最后，虽然非常罕见，但它们是有效的，不是嵌入的，但仍然可以加载。

所以，我不想阻止用户输入任何这些 YouTube 网址，无论是否嵌入。相反，我想检测 YouTube 视频何时无法加载。

这是我正在使用的一些 HTML“代码”，它显示了一个不加载的 YouTube 和一个加载的 YouTube：

function update_ytplayer2( This ) {
 
 // validate the textarea's value -- omitted

  document.getElementById( 'ytplayer_2' ).src = This.value.trim();
}

.webvideourlPreview {
    height: auto;
    width: 75px;
    max-height: 110px;
    margin-right: 3px;
}
textarea {
    width: 400px;
}

<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no" 
    src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    video="true" youtube="true" style="display: block;"></iframe>

⁝<br />

<textarea onblur="update_ytplayer2( this );">https://www.youtube.com/embed/0376xWdwBBs</textarea><br />

⁝

<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
    src="https://www.youtube.com/embed/0376xWdwBBs"
    source="https://www.youtube.com/embed/0376xWdwBBs"
    video="true" youtube="true" embed="true"
    style="display: block;"></iframe>

这是一个codepen，它显示了第二个 iframe，就像它在我的网页中一样。它使用与上面相同的代码和 css 样式。

这是我在 Chrome 浏览器的检查元素面板中看到的内容：

⁝
 <!-- Non-Working YouTube Video -->
▼<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
         src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
         source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
         video="true" youtube="true" style="">
 </iframe>
⁝
 <!-- Working YouTube Video -->
▼<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
          src="https://www.youtube.com/embed/0376xWdwBBs"
          source="https://www.youtube.com/embed/0376xWdwBBs"
         video="true" youtube="true" embed="true" style="display: block;">
    #document
    <!DOCUMENT html>
   ▶<html lang="en" dir="ltr" data-cast-api-enabled="true"
          wtx-context="AE89359A-CCF4-46DF-933F-36746B4B5815">
    </html>
  </iframe>
⁝

两个 iframe 标记都是打开的，但我注意到不工作的 YouTube 在打开和关闭 iframe 标记之间不显示任何内容，但工作的 YouTube 会显示。

有什么方法可以在 javaScript 中检测到这一点吗？

我看到有一个 .contentDocument 属性，但在 Chrome 中，它始终为 null，并且有一个 .contentWindow 属性，但非工作和工作的 YouTube 视频似乎都显示相同的对象/结构和到目前为止，我还没有在对象中找到任何可用于以编程方式确定哪个视频不工作以及哪个视频不工作的对象。

我了解可以使用两个事件，错误和加载，根据我在这些事件上找到的信息，因为我没有将文件加载到 iframe 中，事件不会“触发” ' 是否加载 YouTube 视频。

我还在 StackOverflow 的某处看到原生尺寸属性包含小悲伤脸图形的尺寸，但我不知道如何获取该信息，特别是因为 .contentWindow 没有出现，就我而言当我检查这些元素时，可以告诉这些属性。但是，我宁愿不要仅仅依靠图像的大小来判断加载是否失败。

谢谢

【问题讨论】：

用户应该在哪里输入链接？哪个脚本在 iframe 中加载该链接？
用户将 YouTube 视频 URL 输入到 textarea 中，当更改/模糊时，会导致事件处理函数（未显示 - 但非常简单）执行并验证 textarea 值的格式是一个可能的 YouTube URL，如果是，则将其分配给 iframe 的 src 属性之一。用户应输入或粘贴 YouTube 视频 URL。
我更新了示例，以便您可以更改第二个 iframe 的 src 属性的值。
我添加了上述代码和css的codepen版本的链接。
谢谢，我去看看

标签： html iframe youtube loading

【解决方案1】：

实际上，YouTube 不允许第三方直接嵌入他们的网站。这就是为什么使用https://www.youtube.com/watch?v=NCZaq9pSBxQ 或https://youtu.be/NCZaq9pSBxQ 之类的链接会在控制台中引发Refused to display 'https://www.youtube.com/watch?v=NCZaq9pSBxQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 警告。

幸运的是 Youtube 提供了“嵌入视频”选项，让我们可以嵌入视频。使用此功能，我编写了我的代码。看看这个 sn-p：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        .webvideourlPreview {
            height: auto;
            width: 75px;
            max-height: 110px;
            margin-right: 3px;
        }
        textarea {
            width: 400px;
        }
    </style>
    <script type="text/javascript">
        function update_ytplayer2( This ) {
            //capture trimmed value
            let val = This.value.trim();
            let embed_src;
            if(val.includes('watch?v='))
                embed_src = This.value.replace("watch?v=", "embed/");
            else if(val.includes('youtu.be'))
                embed_src = 'https://www.youtube.com/embed/'
                            + val.split('/').pop();

            // validate the textarea's value -- omitted
            document.getElementById( 'ytplayer_2' ).src = embed_src;
        }
    </script>
  </head>
  <body on>
    <iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no" 
    src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    video="true" youtube="true" style="display: block;"></iframe>

    ⁝<br />

    <textarea onblur="update_ytplayer2( this );">https://www.youtube.com/watch?v=NCZaq9pSBxQ</textarea><br />

    ⁝

    <iframe id="ytplayer_2" class="webvideourlPreview"
    style="display: block;"></iframe>
  </body>
  </html>

在 sn-p 的内部函数 update_ytplayer2 我们使用 val 变量来保存我们的 <textarea> 的修剪值。接下来根据链接的类型，我们可能会或可能不会更改它以获取https://www.youtube.com/embed/[unique_identifier] 形式的链接并将其保存到另一个变量embed_src。最后，将 embed_src 设置为我们的<iframe> 源。

函数update_ytplayer2 每次用户通过将焦点从<textarea> 移开而对<textarea> 产生模糊效果时调用，从而更新<iframe id="ytplayer_2"> 中显示的视频。

注意：我已从 <iframe id="ytplayer_2"> 中删除了 HTML5 非标准属性。

【讨论】：

谢谢，很好的信息。但是，我的用户可能知道也可能不知道他们应该只使用嵌入格式并输入或粘贴非嵌入格式的 URL，在这种情况下，我想显示 YouTube 放入 iframe 中的悲伤面孔图像，如我已经展示过了，但我也想检测视频没有加载，所以我的网页不会尝试做更多的事情，只是展示悲伤的脸图像。这些非标准属性适用于我的应用程序，但不用于显示视频，但您在示例中删除它们不是问题。
现在他们可以插入任何观看、嵌入和分享(youtu.be) 格式。没有解决你的问题吗？
我过去遇到过一些问题，即旧的 YouTube 非嵌入视频在您显示的 URL 发生更改时无法播放。我曾经在 iframe 中显示这些，但是当它停止工作时，我开始使用旧版本的 jwPlayer 播放这些视频，令人惊讶的是其中一些仍然可以播放。现在，因为这不适用于较新的视频，所以我只使用 iframe 播放器并在 YouTube 视频未加载时显示悲伤的表情。但是，我想更新那些非标准属性，以便 jwPlayer 可以接管，除非我需要检测 YouTube 视频没有加载。
换句话说，对于那些知道他们的视频过去可以工作的用户，有时我仍然可以让他们工作。如果旧版本 jwPlayer 不起作用，用户会看到，并且知道如果他们拥有视频，他们必须更新 YouTube 视频才能作为嵌入正常工作。
我也注意到了。当我在基于 Chrome 的浏览器上打开您的页面时，<iframe> 是空白的。当我在 Firefox 中打开时，会弹出 Youtube 警告页面。