3

OK、私は立ち往生しており、Googleのドキュメントに従って、Stackoverflowでここで提案を読んだ後でも、何が問題なのかわかりません. 自分の Web ページに埋め込まれた 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 ページの小さな 1 行のテキストに答えがあります: http://code.google.com/apis/youtube/js_api_reference.html

注: これらの呼び出しをテストするには、Web サーバー上でファイルを実行する必要があります。これは、Flash プレーヤーがローカル ファイルとインターネット間の呼び出しを制限するためです。

そのため、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 Player 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

「e1」の代わりに「o1」という ID を使用するとどうなりますか?

このページで問題ありません: http://code.google.com/apis/youtube/js_api_reference.html API を使用するには、「swfobject」ライブラリを含める必要があるようです。私はそれを試してみます。

[編集] ここに私が持っているものがあります:

<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 に答える