Question

我无法让下面的代码工作。我正在页面上放置一个播放器并加载一个视频。这按预期工作。然后，当用户点击其中一个时，我想要播放其他视频的缩略图（这里只显示了两个）。这部分不起作用。我在控制台上收到一条错误消息，说ytplayer.loadvideobyID不是一个函数。我在Firefox 26.0上测试它。

<html>
<head>
</head>
<body>
<table width="900" align="center" border="0" cellpadding="0" cellspacing="1">
  <tbody>       
<tr>
  <td>      
    <div id="ytplayer"></div>
  <td>   
</tr>   
<tr>
  <td>      
     <a href="javascript:void(0);" onclick="ytplayer.loadVideoById('tCnEH8MRrjE',0);"><img src="http://img.youtube.com/vi/tCnEH8MRrjE/hqdefault.jpg" width="176" height="132"></a>     
  </td>   
</tr>   
<tr>
       <td>     
      <a href="javascript:void(0);" onclick="ytplayer.loadVideoById('lqdFrGFo6SQ',0);"><img src="http://img.youtube.com/vi/lqdFrGFo6SQ/hqdefault.jpg" width="176" height="132"></a>    
   </td>   
</tr>   
  </tbody>
</table>
    <script  type="text/javascript">
     // Replace the 'ytplayer' element with an <iframe> and
      // YouTube player after the API code downloads.

      var player;
      function onYouTubeIframeAPIReady() 
      {
        player = new YT.Player('ytplayer', 
        {
          height: '390',
          width: '640',
          videoId: 'tCnEH8MRrjE',
        });
      }  

     // Load the IFrame Player API code asynchronously.
     var tag = document.createElement('script');
     tag.src = "https://www.youtube.com/player_api";
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
   </script>
  </body>
</html>

Answer 1

您将HTML元素（"ytplayer"）的ID与Javascript变量（player）的名称混淆。将ytplayer.loadVideoById(...)更改为player.loadVideoById(...)。

或者，您可以为所有这些符号使用相同的符号（player或ytplayer）...

在播放器中加载新视频

1 个答案: