3

好的，我被困住了，即使在关注 Google 的文档并阅读 Stackoverflow 上的建议之后，我也不知道出了什么问题。为什么我无法控制网页中的 Youtube 嵌入？

如果我创建一个带有 <body> 的 HTML 文件：

<object id="o1" width="480" height="295">
  <param name="movie" 
    value="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&">
  </param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed id="e1" 
    src="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
  </embed>
</object>

即使我尝试这样做：

// I get an object. Yay.

document.getElementById('e1');

// This generates "...playVideo is not a function"

document.getElementById('e1').playVideo();

帮助！我究竟做错了什么？谢谢。

4

4 回答 4

5

好的，这是在 API 页面上一小行文本中找到的答案：http ://code.google.com/apis/youtube/js_api_reference.html

“注意：要测试这些调用中的任何一个，您必须让文件在网络服务器上运行，因为 Flash 播放器会限制本地文件和 Internet 之间的调用。”

因此，为了让我继续在我的 Mac 笔记本电脑上进行开发，我做了以下操作：

  1. 编辑我的/etc/hosts文件以包含一个返回到我的本地主机的条目：

    127.0.0.1   testhost.com

  2. 编辑我的/etc/apache2/httpd.conf文件以添加指向我的开发目录的虚拟主机条目：

    <VirtualHost *:80>
    ServerName testhost.com
    DocumentRoot /Users/amy/flashproj
    <Directory /Users/amy/flashproj>
        AllowOverride all
        Options MultiViews Indexes FollowSymLinks
        Allow from All
    </Directory>
</VirtualHost>

  3. 重启阿帕奇：

    sudo apachectl restart

  4. 通过我的新虚拟服务器浏览回我自己的本地主机：

    http://testhost.com

瞧。现在完全可以了。我可以查询播放器的页面：

document.getElementById('e1');                // OK
document.getElementById('e1').playVideo();    // OK!

哇！也不需要onYouTubePlayerReady()！

于 2010-02-07T19:51:29.987 回答
2

Youtube 播放器在您尝试使用时尚未加载。有一个特殊的回调函数，一旦加载就会自动触发。

显示无镶边播放器的 HTML 页面必须实现名为 onYouTubePlayerReady 的回调函数。当播放器完全加载并且 API 准备好接收调用时，API 将调用此函数。

通过YouTube JavaScript 播放器 API 参考。

因此，您可以通过以下方式重写您的代码：

<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
    var ytplayer = document.getElementById('e1');
    ytplayer.playVideo();
}
</script>

playerapiid如果在处理程序中有很多要区分的播放器，您也可以在嵌入播放器时介意传递onYouTubePlayerReady。

于 2010-02-07T17:56:57.703 回答
0

如果你使用 id "o1" 而不是 "e1" 会发生什么？

在此页面上很好：http ://code.google.com/apis/youtube/js_api_reference.html在我看来，需要包含“swfobject”库才能使该 API 可用。我会试试看。

[编辑] 好的，这就是我所拥有的：

<html>
  <head>
    <script src='http://code.jquery.com/jquery-1.4.1.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
    <script>
      window['onYouTubePlayerReady'] = function onYouTubePlayerReady(playerId) {
        player = document.getElementById("zebra");
        player.playVideo();
      };
      $(function() {
         swfobject.embedSWF(
         "http://www.youtube.com/v/qCTLCNmnlKU?hl=en_US&fs=1&enablejsapi=1&playerapiid=ytplayer", 
          "foo",
          "480", "295",
          "8",
          null, null,
          { allowScriptAccess: 'always' },
          { id: 'zebra' }
        );
      });
    </script>
  </head>
  <body>
    <div id='foo'>Foo</div>
  </body>
</html>

这行得通，但奇怪的是，它仅在我从真正的 Web 服务器提供服务时才有效。如果我把它放在一个本地文件中并在浏览器中加载它，它就不起作用。我不知道为什么，但我绝对不是 Flash 专家，也不是 YouTube 专家。

请参阅http://gutfullofbeer.net/youtube.html（与上面输入的内容相同）

于 2010-02-07T17:35:56.687 回答
0

我被这个问题困扰了两天......与youtube播放器变量相关的每个问题都与在本地运行它有关。通过 windows/hosts 伪造地址后，它可以完美运行。

于 2015-05-13T16:21:39.050 回答