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

如何解决如何检测YouTube何时无法加载？

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

某些可能有效并已加载
某些无效并且无法加载
有些，尽管有效的URL并未嵌入与类似的URL

https://www.youtube.com/watch?v=NCZaq9pSBxQ并且不加载，并且
最后，虽然很少见，但有效，不是嵌入的，但仍在加载。

因此，我不想阻止用户输入这些YouTube URL中的任何一个，无论是否嵌入。相反，我想检测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视频和正常工作的YouTube视频似乎都显示相同的对象/结构，到目前为止，我还没有在对象中找到任何可用于以编程方式确定哪个视频无法正常工作的视频。

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

我还在StackOverflow的某个地方看到了本机size属性包含小的悲伤图形的大小，但是据我所知，我看不到如何获取该信息，尤其是因为未出现.contentWindow。当我检查这些元素时，可以告诉这些属性。但是，我宁愿不仅仅依靠图像的大小来确定负载的失败。

谢谢

解决方法

实际上，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提供了“嵌入视频”选项，使我们可以嵌入视频。使用此功能，我编写了代码。查看此代码段：

<!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>

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

函数update_ytplayer2每次用户通过将焦点移离<textarea>而在<iframe id="ytplayer_2">上产生 blur 效果时调用，反过来又更新了<iframe id="ytplayer_2">中显示的视频。 / p>

注意：我已从[line.split(' ') for line in [ line.rstrip() for line in file.readlines()]]中删除了HTML5非标准属性。

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

如何解决如何检测YouTube何时无法加载？

解决方法

相关推荐