16

私が読んだことから、これは私がYouTubeAPIをセットアップする方法です：

<!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（）は機能しません。

この問題を解決するにはどうすればよいですか？

4

7 に答える 7

29

ドキュメントに記載されているように、テストスクリプトを使用してWebサーバー上にいる必要があります。

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

于 2010-01-17T23:54:00.463 に答える
5

この関数：

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

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

守らなければならない唯一のルールは次のとおりです。この関数をdomreadyイベント内に配置しないでください。より早く定義する必要があります。

たとえば、mootoolsでは次のように使用します。

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

document.addEvent('domready', function() { 
   ...
});
于 2012-10-22T08:07:24.250 に答える
4

私には答えがあります。スクリプトのこの部分を分離して、独自のスクリプトタグの先頭に配置します。OMG、ついに

<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
    ytp = document.getElementById('ytplayer');
    ytp.mute();
};
</script>
于 2011-10-23T08:12:01.960 に答える
4

これは、JavaScriptを使用してYouTubeビデオをWebサイトに追加するための最良の方法だと思います。それはあなたにイベントを扱う非常に明確な方法を与えます。これはローカルマシンで動作し、私が知る限り、Appleデバイスで動作します。YouTubeAPIの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/introducing-javascript-player-api-for.html

于 2012-04-20T09:12:47.067 に答える
1 
<!DOCTYPE html>

FF4でhtml5のものが機能するためには、ページをリードする必要がありました

于 2011-05-17T20:22:55.187 に答える
1

あなたがそのようにyoutubeビデオを埋め込んでいるならば：

<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>

</iframe>の後。少なくともそれが私がそれを機能させる方法です。

さらに、jQueryなどを介してiframeの[src]属性を動的に変更して新しいビデオをロードする場合onYouTubePlayerAPIReady()は、ロード後に呼び出す必要があります。

[src]属性を変更してから、次のことを行います。 setTimeout(onYouTubePlayerAPIReady, 500);

于 2013-07-03T15:26:11.143 に答える
0

同じ問題が発生しましたが、別の理由があります。Chromeでは機能しましたがFirefoxでは機能しませんでした。その理由は、「Content-type：text /html」ではなく「Content-type：text/xml」というhttpヘッダーがあったためです。HTMLとして機能すると、FirefoxでもonYouTubePlayerReadyイベントが発生するようになりました。

誰かがGoogleからのこの回答につまずいた場合に備えて、これを投稿するだけです（解決策を見つけようとしたときに行ったように）。

于 2011-12-20T14:12:17.780 に答える