个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:24:05 26 4
gpt4 key购买 nike

我有一个网页，允许用户输入 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问题
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com