使用 Youtube Iframe API 创建的视频播放器停止与 Chrome v.85 配合使用

2023-12-09

我在将 Youtube iframe API 与最新稳定版本的 Chrome(版本 85)一起使用时遇到问题。我知道一个月前一切都可以正常工作,但现在,即使完全遵循 Youtube iframe API 文档中找到的最基本的示例:

https://developers.google.com/youtube/iframe_api_reference#Getting_Started

不再起作用了。 onReady 和 onStateChange 事件没有被触发,并且“player”对象缺少其大部分功能,例如player.playVideo() 未定义。在我测试过的任何其他浏览器上都不会出现此问题,只有当我在测试时登录到我的 Youtube 帐户时才会出现此问题。

我怀疑问题的根源是通过 Youtube 的请求发送的 cookie,因为我在控制台的“发现问题”选项卡中收到此错误:

“通过指定其 SameSite 属性来指示是否在跨站请求中发送 cookie”

,而 Chrome 在 85 版本的注释中提到了这一点:

“拒绝不安全的 SameSite=无 cookie”

如果我退出 Youtube,这将与播放器正常工作的事实相匹配,因为 Youtube 使用这些 cookie 根据您的个人资料推荐不同的视频。

我目前正在寻找解决方法,我唯一能找到的是,如果我手动创建 iframe,而不是使用 API,我可以将“youtube-nocookie”而不是“youtube”放在 iframe 的 src 中,但这样我就没有可以引用的对象来控制播放器,例如,如果我必须创建一个自定义按钮来暂停/播放视频。我猜主要是在 Youtube 上修复他们的 API,但是现在有什么方法可以解决这个问题吗?

这是一个 Codepen 来说明问题,代码取自上面链接的 Youtube Iframe API 文档:

https://codepen.io/Gabielovv/pen/VwadJvg?editors=1111

  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    console.log("onPlayerReady");
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;

  function onPlayerStateChange(event) {
    console.log("onPlayerStateChange");
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }

  function stopVideo() {
    player.stopVideo();
  }

  function playYtVideo() {
    console.log("playYtVideo");
    player.playVideo();
  }

从此找到了解决办法谷歌问题跟踪器。看来是浏览器的问题。

尝试一下:

  • 清除缓存,包括cookie
  • 尝试禁用chrome://flags/#same-site-by-default-cookies然后把它放回去(对我有用)

希望有帮助????

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Youtube Iframe API 创建的视频播放器停止与 Chrome v.85 配合使用 的相关文章

随机推荐

  • phpmyadmin 出现奇怪的错误,安装成功但仍然无法运行

    我一整天都在努力安装 phpmyadmin 我已经尝试重新安装很多次了 但还是不行 打开 localhost phpmyadmin 时 我收到一些文本 而不是实际的 phpmyadmin UI 正文是 addJSON options PMA
  • 如何在 Web midi api 中发现 midi 键盘?

    参考 2013 年的浏览器支持 Web MIDI API 我目前正在 OS 10 9 2 上运行 Chrome 34 0 1847 116 并尝试使用 Web Midi API 启用 chrome flags enable web midi
  • Perl正则表达式匹配较长句子中的可选短语

    我正在尝试匹配句子中的可选 可能存在 短语 perl e word1 word2 word3 print 1 1 2 2 3 3 n if m word1 word2 word3 Output 1 word1 2 3 word3 我知道第一
  • 使用 Coldfusion 上传时存储文件名

    我正在尝试将要上传的所选文件的文件名存储到表单上的隐藏输入字段中 我的表格看起来像这样
  • 如何手动更新实体框架代码优先模型,以便它更新数据库(使用新列)?

    有人可以告诉我如何将数据成员 col 添加到我的 mvc3 模型 类 并让它更新数据库 而不必从头开始生成所有内容 我首先从代码开始工作 当我更改模型然后运行我的项目时 我收到一条错误消息 指出模型已更改 有什么干净简单的方法来同步创建新的
  • std::使用整数数组中的元素作为 std::variant 中的目标类型从 std::variant 获取内容

    我有一个整数数组来检索 std variant 中的内容 但是编译失败 报错信息No matching function to call get 您能否解释原因并提出实现相同目的的可行解决方案 using my type std varia
  • 显示实时页面查看者数量[重复]

    这个问题在这里已经有答案了 可能的重复 如何使用 javascript 或 php 统计网站当前访问者 我的网站上有一个嵌入式流 但我想提取页面上实时观看者的数量 有没有一种方法可以使用 PHP AJAX 来执行此操作 显示当前正在查看我的
  • 从 C#(非 C)COM 组件加载和传递 JScript 数组

    我看过有关 jscript 数组的教程 但还没有看到 我看到类似的问题 但涉及 Win32 代码而不是 NET 想知道如何在 JScript 和 C COM 组件之间来回传递数组 例如 我在 C COM 中定义了两个属性 它们返回字符串和整
  • 视图模型不断创建实时数据实例

    我在中创建了视图模型的实例onCreate活动的方法 ticketViewModel ViewModelProviders of this get TicketViewModel class 那我有一个方法 AddTicket 它使用vie
  • 增加 Angular 2+ 和 ASP.NET Core WebAPI 应用程序中的超时

    在我的 Angular 2 ASP NET Core MVC WebAPI 应用程序中 我有一个从客户端 UI 到服务器的长时间运行的 API 调用 请求在 30 秒后超时 我想在客户端或服务器端定义此特定 API 调用的超时 我只找到了全
  • 将文件拖到桌面快捷方式 - 不在应用程序中打开文件

    我有一个小型日志查看器应用程序来读取一些自定义日志 我可以将文件直接拖到可执行文件上 然后通过命令行加载它们就可以了 但是 如果我将文件拖到桌面快捷方式 Windows 将不会使用这些文件作为命令行参数来打开应用程序 它根本不会打开该应用程
  • 改变垫子展开指示器的旋转

    我成功地将垫指示器移动到左侧 而不是右侧 并且我使用变换属性使其在展开时向内转动 不过 我希望指示器在展开时朝上 在折叠时朝下 我如何正确地设计它来实现这一目标 https stackblitz com edit indicatorrota
  • Git - 如何查看方法/函数的更改历史记录?

    所以我发现了关于如何查看文件的更改历史记录的问题 但是这个特定文件的更改历史记录是巨大的 我真的只对特定方法的更改感兴趣 那么是否可以查看该特定方法的更改历史记录 我知道这需要 git 来分析代码 并且不同语言的分析会有所不同 但方法 函数
  • 尝试从应用扩展访问钥匙串时出现“没有可用钥匙串”错误

    我正在制作一个 IOS 自定义键盘扩展 默认情况下 键盘的功能有限 但是当用户从主父应用程序购买完整版本时 键盘会解锁缺少的部分 为了检查用户是否购买了该应用程序 我尝试存储Bool在 IOS 钥匙串中使用这个图书馆 let IAPKeyc
  • UTF8 和日语字符

    问题 外来字符未按应有的方式显示 这包括德语 日语 俄语和除英语之外的所有其他语言 完美运行 PHP 通过 jQuery AJAX 调用调用 MySQL 它应该返回信息并将其显示在页面上 数据被调用并显示 然而 对于非英语字符 结果显示为
  • 如何根据 iFrame 内容的大小“增长”iFrame?

    我正在动态加载 iFrame 有些页面比其他页面 更高 我希望 iFrame 能够相应地增长 是否可以 如果是这样 怎么办 是的 jquery 是可以的 父页面代码 iframe页面上的脚本 function alertSize var m
  • 如何实现网页的实时更新?

    Google 的 GMail 服务之所以能做到这一点 是因为它集成了 Google Talk 而 Etherpad 现在的 typewith me 使 Google Wave 等使用的系统闻名 当其他用户对页面进行更改时 所有此类系统都会立
  • 禁用 LLVM 10 C++ API 的常量折叠

    我正在使用 LLVM C API 为 C 语言的子集编写编译器前端 我注意到生成的 IR 总是应用恒定的折叠优化 但我想禁用此功能并获得忠实的 未优化的 IR 有什么办法可以做到这一点吗 以下是我用来从模块生成 IR 的代码 llvm ve
  • 当通过 javascript/jquery 更改值时,多个选择不会更新

    我有一个多重选择 其中每个选项都设置了一个类 根据类别 我可以预先选择特定类别的所有选项 因此用户不必自己选择所有选项 到目前为止 它运行良好 直到我通过单击手动选择一个选项 从现在开始 预选似乎不再起作用了 但只有视觉效果不再起作用 选项
  • 使用 Youtube Iframe API 创建的视频播放器停止与 Chrome v.85 配合使用

    我在将 Youtube iframe API 与最新稳定版本的 Chrome 版本 85 一起使用时遇到问题 我知道一个月前一切都可以正常工作 但现在 即使完全遵循 Youtube iframe API 文档中找到的最基本的示例 https