YouTube API onPlayerReady未触发

Question

YouTube API onPlayerReady未触发

我创建了一个新页面,特别是为了测试API.复制粘贴他们的例子时

<div id="player"></div>

Run Code Online (Sandbox Code Playgroud)

和

 var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

Run Code Online (Sandbox Code Playgroud)

一切正常.

现在当我删除它<div id="player"></div>而改为替换它

 <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>

Run Code Online (Sandbox Code Playgroud)

它不再有效.它永远不会进入onPlayerReady或onPlayerStateChange.奇怪的是它昨晚正在工作,今天却没有.我附上了我的完整代码以防它可能有所帮助.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>


    <script>
      // 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', {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        alert('test');
        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) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 16

每发行5670:

快速解决方法是在播放器的iframe元素的属性中添加origin=http://www.example.com(替换为您的服务器完整域;确保您使用http://或 https://适合您的网站)src=.请确保origin= 属性的值与主机域和URL方案完全匹配.例如
<iframe
  type="text/html"
  width="640"
  height="480"
  src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com"
  frameborder="0">
</iframe>
Run Code Online (Sandbox Code Playgroud)

在FF中，这仍然对我不起作用。它在Chrome和Safari中可以正常运行，但在FF中，readyState和stateChanges不会触发。我已经尽力了。最后，我创建了一个空的DIV，并在那里直接初始化了“ YT.Player” (2认同)

Answer 2

Dav*_*sey 5

最终发布了修复：https://code.google.com/p/gdata-issues/issues/detail ?id=5670#c6

\n\n

这是上面链接中答案的直接引用：

\n\n

\n
快速解决方法是添加 origin= http://www.example.com（将 \n 替换为您的服务器完整域；确保您使用适合您网站的 http:// 或 https://\n ）到玩家 iframe 元素的 src= 属性。请确保 origin= 属性的值\n 与主机域和 URL 方案完全匹配。例如
\n\n
<iframe\n  type="text/html"\n  width="640"\n  height="480"\n  src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com"\n  frameborder="0">\n</iframe>\n
Run Code Online (Sandbox Code Playgroud)\n\n
我目前正在与工程团队合作，以确定是否需要继续使用 origin=，或者是否可以恢复这个新的要求，但这是立即修复的方法。对于在此期间出现的损坏和缺乏先进的沟通表示歉意。
\n\n
如果您使用 YT.Player() 构造函数为您创建 iframe 元素\n，那么这不是问题\xe2\x80\x94，这对于明确包含的开发人员来说是一个边缘情况\n iframe 元素作为页面 HTML 的一部分。
\n

\n\n

我实施了上面的修复，它对我有用。

\n

归档时间：	11 年，11 月前
查看次数：	18618 次
最近记录：	10 年，8 月前