Question

我正在尝试捕获YT对象。 onYouTubePlayerReady（）函数被调用，但我似乎无法对该对象做任何事情。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("swfobject", "2.2");
</script>
<script type="text/javascript">
    function onYouTubePlayerReady (playerID)
    {
        ytplayer = document.getElementById(playerID);
    }

    function play ()
    {
        if (ytplayer)
        {
            ytplayer.playVideo();
        }
    }
    play();
</script>

ytplayer是引用DOM而不是视频本身（为此播放未捕获的TypeError：对象＃没有方法'playVideo'，但这基本上是google给出的示例。

我做错了什么？

Answer 1

您在页面加载后立即致电play();。

但加载youtube播放器需要一些时间，因此在一段时间后调用函数onYouTubePlayerReady。

由于您在ytplayer中定义onYouTubePlayerReady，因此在调用onYouTubePlayerReady之前无法使用ytplayer。此外，ytplayer应该是全局的，以便两个函数都可以使用它。

Answer 2

我在上面的代码中根本没有看到你在哪里初始化你的视频播放器。下面的代码在Firefox中正常工作。替换您要播放的视频的视频ID代替下面的[YOUR_VIDEO_ID]，您应该全部设置。还可以确认下面的代码就像IE和Chrome中的冠军一样。

<div id="video" class="overlay">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  <div id="ytapiplayer"></div>
  <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: 'myytplayer' };
    swfobject.embedSWF("http://www.youtube.com/v/[YOUR_VIDEO_ID]?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "640", "360", "8", null, null, params, atts);

    function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");

      ytplayer.addEventListener('onStateChange','onytplayerStateChange');
    }

    function onytplayerStateChange(newState) {
      alert("Player's new state: "+newState);
    }

    function play() {
      if (ytplayer) {
        ytplayer.playVideo();
      }
    }
  </script>
  <a href="javascript:void(0)" onclick="play()">Play</a>
</div>

我认为您缺少的是您需要通过传入对象初始化属性（var atts = ...）行的任何内容来引用“playerId”。进行一些测试确实表明“onYouTubePlayerReady”函数没有实际传递可用于执行DOM查找的有效id值。

Youtube JSAPI，示例不起作用

2 个答案: