html - 如何检测 YouTube 何时无法加载？-6ren

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

转载作者：行者123 更新时间：2023-12-03 05:24:05

26

4

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

有些可能是有效的并加载，

有些无效且无法加载，

一些，虽然有效的 URL 没有嵌入类似的 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 浏览器的 Inspect Element 面板中看到的内容:

⁝
 <!-- 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 中，它始终为空，并且有一个 .contentWindow 属性，但非工作和工作的 YouTube 视频几乎都显示相同的对象/结构，到目前为止我在对象中没有找到任何可用于以编程方式确定哪个视频不工作以及哪个视频不工作的对象。
我知道有两个事件可以使用，错误和加载，根据我在这些事件上找到的信息，因为我没有将文件加载到 iframe 中，事件不会“触发”是否YouTube 视频是否加载。
我还在 StackOverflow 的某个地方看到原生大小属性包含小悲伤脸图形的大小，但我不知道如何获取该信息，特别是因为 .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"> 中显示的视频.
注:我从 <iframe id="ytplayer_2"> 中删除了 HTML5 非标准属性。 .

关于html - 如何检测 YouTube 何时无法加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63592978/

26

4

0

文章推荐：安卓模拟器不工作。 gradle构建错误

文章推荐： maven - 意外标记 <!d(位置 : START_DOCUMENT seen\n<! d...@2:4)

文章推荐： angularjs - ng-src无法用于youtube嵌入视频

文章推荐： android-studio - Android分支抖动中的GradleException问题

windows-8 - 从 Metro 应用程序检测桌面可用性(检测 ARM、检测 Windows RT 系统)
这是一个与 Get OS-Version in WinRT Metro App C# 相关的问题但不是它的重复项。是否有任何选项可以从 Metro 应用程序检测系统上是否有可用的桌面功能？据我所知，
Android闹钟广播/检测
我想在闹钟响起时做点什么。例如， toast 或设置新闹钟。我正在寻找可以检测闹钟何时响起的东西。首先，我在寻找广播 Action ，但找不到。也许是我的错？当闹钟响起时，还有其他方法可以做些什么吗
security - 检测、更改或删除现有的变异观察者
如果某个 JS 添加了一个突变观察者，其他 JS 是否有可能检测、删除、替换或更改该观察者？我担心的是，如果某些 JS 旨在破坏某些 DOM 元素而不被发现，那么 JS 可能想要摆脱任何观察该 DOM
CUDA的 torch 检测
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
Android:检测 USB
有没有办法在您的 Activity/应用程序中(以编程方式)知道用户已通过 USB 将您的手机连接到 PC？最佳答案有人建议使用 UMS_CONNECTED自最新版本的 Android 起已弃用
javascript - 检测/测量滚动速度
我正在想办法测量速度滚动事件，这将产生某种代表速度的数字(相对于所花费的时间，从滚动点 A 到点 B 的距离)。我欢迎任何以伪代码形式提出的建议...... 我试图在网上找到有关此问题的信息，但找不
Javascript 检测 Skype？
某些 JavaScript 是否可以检测 Skype 是否安装？我问的原因是我想基于此更改链接的 href:如果未安装 Skype，则显示一个弹出窗口，解释 Skype 是什么以及如何安装它，如果已
macos - 检测 CGAsociateMouseAndMouseCursorPosition
我们正在为 OS X 制作一个使用 Quartz Events 移动光标的用户空间设备驱动程序，当游戏(尤其是在窗口模式下运行的游戏)无法正确捕获鼠标指针时，我们遇到了问题(= 将其包含/保留在其窗口
AngularJS - 检测、停止和取消路线更改
我可以在 Controller 中看到事件 $routeChangeStart，但我不知道如何告诉 Angular 留下来。我需要弹出类似“您要保存、删除还是取消吗？”的信息。如果用户选择取消，则停留
java - 圆形阵列环路，检测
我正在解决一个问题，并且已经花了一些时间。问题陈述:给你一个正整数和负整数的数组。如果索引处的数字 n 为正，则向前移动 n 步。相反，如果为负数(-n)，则向后移动 n 步。假设数组的第一个元素向前
javascript - 检测[i]值
我试图建立一个条件，其中 [i] 是 data.length 的值，问题是当有超过 1 个值时一切正常，但当只有 1 个值时，脚本不起作用。 out.href = data[i].hr
java - 物体识别/检测？
这是我的问题，我需要检测图像中的 bolt 和四分之一，我一直在搜索并找到 OpenCV，但据我所知它还没有在 Java 中。你们打算如何解决这个问题？最佳答案实际上有一个 OpenCV 的 Ja
Java - 检测 ping
是否可以检测 ping？ IE。设备 1 ping 设备 2，我想要可以在设备 2 上运行的代码，该代码可以在设备 1 ping 设备时进行检测。最佳答案 ping 实用程序使用的字面消息(“ICM
用于分布式累积批处理作业的 Prometheus 检测
我每天多次运行构建脚本。我的感觉是我和我的同事花费了大量时间等待这个脚本执行。现在想知道:我们每天花多少时间等待脚本执行？ .我可以对总体平均值感到满意，即使我真的很想拥有每天的数据(例如“上周一我们
iphone - 检测/修复内存泄漏
我已经完成了对项目的编码，但是当我在客户端中提交了源代码时，就对它进行了测试，然后检测到内存泄漏。我已经在Instruments using Leaks中进行了测试。我遇到的问题是AVPlayer和
检测 Callable 是否是静态的
我想我可以用 std.traits.functionAttributes 来做到这一点，但它不支持 static。对于任何类型的可调用对象(包含 opCall 的结构)，我如何判断该可调用对象是否使用
r - 检测/确保在多核中使用多核
我正在使用多核 R 包中的并行和收集函数来并行化简单的矩阵乘法代码。答案是正确的，但并行版本似乎与串行版本花费的时间相同。我怀疑它仅在一个内核上运行(而不是在我的机器上可用的 8 个内核!)。有没有
Python 检测 EOF
我正在尝试在读取 csv 文件时编写一个这样的 if 语句: if row = [] or EOF: do stuff 我在网上搜索过，但找不到任何方法可以做到这一点。帮忙？最佳答案 wit
javascript - 检测/捕获字体大小变化的最佳方法是什么？
我想捕捉一个 onFontSizeChange 事件然后做一些事情(比如重新渲染，因为浏览器已经改变了我的字体大小)。不幸的是，不存在这样的事件，所以我必须找到一种方法来做到这一点。我见过有人在不可
c# - 检测/监听服务启动和停止状态变化
我有一个使用 Windows 服务的 C# 应用程序，该服务并非始终打开，我希望能够在该服务启动和关闭时发送电子邮件通知。我已经编写了电子邮件脚本，但我似乎无法弄清楚如何检测服务状态更改。我一直在阅

首页

博学

6Ren·AI

商城

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