YouTubeのAPIは - '）（onYouTubePlayerReady' を発射ありません

StackOverflow https://stackoverflow.com/questions/2083128

質問

私が読んだから、これは私がセットアップ YouTubeのAPI のあり方です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta content='text/html;charset=UTF-8' http-equiv='content-type' />
    <title>Youtube Player</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
      function onYouTubePlayerReady(id) {
        console.log("onYouTubePlayerReady() Fired!");
        var player = $("#youtube_player").get(0);
      }

      var params = { allowScriptAccess: "always" };
      var atts = { id: "youtube_player" };
      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
                         "youtube", "425", "356", "8", null, null, params, atts);

    </script>
  </head>
  <body>
    <div id="youtube"></div>
  </body>
</html>
しかし、「onYouTubePlayerReadyは（）」は全く発生しません、と私は手動でプレイヤーへの参照を取得する場合、メソッドの多くは未定義です。例えば、cueVideoById（）は動作しますが、playVideo（）はしません。

私はこの問題を解決することができますか？

役に立ちましたか？

解決

<に述べたように、

あなたは、あなたのテストスクリプトを使用して、Webサーバー上に存在する必要があり強い>ドキュメントののます：

  

注：これらの呼び出しのいずれかをテストするには、Webサーバ上で実行されているファイルを持っている必要があり、ローカルファイルとインターネットの間のFlashプレイヤーを制限し呼び出しなど

他のヒント

この機能ます：

function onYouTubePlayerReady(playerid) {
  console.log('readyIn');
};

別のスクリプトタグ内の頭の中に直接である必要はありません。

のみであるあなたは維持する必要がありますルール：。domreadyイベント内でこの機能を入れていない - それはすぐに定義する必要があります。

私はこのようにそれを使用MooToolsは、例えば、

function onYouTubePlayerReady(playerid) {
  echo('readyIn');
};

document.addEvent('domready', function() { 
   ...
});

私は、スクリプトのこの部分を分離し、独自のスクリプトタグに頭に入れて、答えを持っています。 OMG、最後に

<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
    ytp = document.getElementById('ytplayer');
    ytp.mute();
};
</script>

私はこれにはJavaScriptを使用してWebサイトにユーチューブのビデオを追加する最善の方法を検討してください。それはあなたのイベントを扱うのは非常に明確な方法を提供します。これは、ローカルマシン上で動作し、私の知る限りでは、それはAppleデバイス上で動作します。あなたはユーチューブAPIのJavaScriptのドキュメントに記載されているすべてのイベントや機能を使用することができます。

<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
    evt.target.playVideo();
}
function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}
</script>

ソース： http://apiblog.youtube。 COM / 2011/01 /導入-javascriptのプレーヤー-API-for.htmlする 

<!DOCTYPE html>
FF4に私のための機能にHTML5のもののための順序でページをリードしていた。

あなたがそうのようにユーチューブの動画を埋め込む場合：

<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

あなたは配置する必要があります。

<script src="http://www.youtube.com/player_api"></script>

の後に。少なくとも、それは私が仕事にそれを得た方法です。

あなたが動的にjQueryを経由してのiframeの[ソース]属性を変更しているか、新しいビデオをロードするためにどのような場合には、

また、その後、あなたはそれが読み込まれた後onYouTubePlayerAPIReady()を呼び出す必要があります。

私は、[ソース]属性を変更することを好む、その後： setTimeout(onYouTubePlayerAPIReady, 500);

だけではなく、他の理由で、同じ問題がありました。それはクロームではなく、Firefoxで働いていた、そしてその理由は、私は、HTTPヘッダの「Content-タイプ：text / xmlで」持っていたということでした代わりに、「コンテンツタイプ：text / htmlの」のを。 HTMLとして機能する今も、FirefoxでonYouTubePlayerReadyイベントが発生します。

（解決策を見つけるためにしようとしたとき、私はちょうど行ったように）

だけが、Googleからのこの回答にケースの誰かのつまずきでこれを投稿します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top