YouTube 播放器 API 未按文档说明工作答案

【问题标题】：YouTube Player API is not working as documentedYouTube 播放器 API 未按文档说明工作
【发布时间】：2021-01-03 08:43:10
【问题描述】：

YouTube Player API 目前似乎无法正常工作。播放器将正确初始化，但没有任何方法或事件起作用。

<div class="flex">
    <div id="player"></div>
    <div id="log"></div>
</div>

<script>
    // for convenience
   var isPlayerReady = false;
   var logEl = document.getElementById('log');

   function addToLog(text) {
       logEl.innerHTML = logEl.innerHTML + text + '<br>';
   }

   window.setTimeout(function () {
       if (!isPlayerReady) {
           addToLog('5 seconds have passed and the player has not fired the onReady event. This is a good indication that the API is not working properly.');
       }
   }, 5000);
   
   // from here on, the code is a direct copy of an example from the official docs

   // 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() {
       addToLog('onYouTubeIframeAPIReady fired, loading Player');
       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) {
       isPlayerReady = true;
       addToLog('onPlayerReady fired');
       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) {
       addToLog('onPlayerStateChange fired');
       if (event.data == YT.PlayerState.PLAYING && !done) {
           setTimeout(stopVideo, 6000);
           done = true;
       }
   }

   function stopVideo() {
       player.stopVideo();
   }
    </script>

我创建了一个简单的代码笔来监控问题here。此示例的大部分内容是official docs 中示例之一的直接副本。

【问题讨论】：

我在那个 codepen 中看不到任何说明任何错误的东西......你有什么问题（绝对没有错误）
在加载时，我看到onYouTubeIframeAPIReady fired, loading Player onPlayerReady fired onPlayerStateChange fired onPlayerStateChange fired onPlayerStateChange fired，视频在 6 秒后停止...
@JaromandaX 感谢您使用笔。没有任何错误。请看代码：onPlayerReady，视频应该是自动播放的。
哦，这可以被浏览器中的设置覆盖......我当然不允许它
@JaromandaX 顺便说一句很奇怪：我没有看到你提到的onPlayerStateChange fired！

标签： javascript api youtube

【解决方案1】：

[编辑] 从此Google Issue Tracker 找到解决方案。好像是浏览器的问题。

试试这些：

清除缓存，包括 cookie
尝试禁用 chrome://flags/#same-site-by-default-cookies 并将其恢复（对我有用）

希望对你有帮助?

===

你并不孤单！我有使用 on... 事件（onReady 等）的代码，几天前该事件有效，但在没有代码更改的情况下突然停止工作。

它已发布在 Google 问题跟踪器上（请参阅 here）
another stackoverflow post 说明了同样的问题
它甚至渗透到像 react-youtube 这样的子库（参见 Issue #260）

看起来它从 9 月 9 日开始，与 Youtube Data API 版本一致（请参阅revision history for Sept. 9）。但我在他们的列表中看不到任何会损害 iframe 事件/功能的东西?

这就是我所取得的成就，希望能给某人一个提示以解决这个问题。 ??‍♂️ 将在发现时更新此评论。

【讨论】：