15

YouTube の iframe API を読み込もうとしています。これまでのところ、私がやろうとしているのは、プレーヤーを作成してロードすることだけです。APIをロードしているようですが、「YT.Player()」をコンストラクタとして認識しません。chrome jsコンソールのその行で発生している正確なエラーは次のとおりです。

    Uncaught TypeError: undefined is not a function

だから...世界で何が間違っているのですか? 私はこのすべてに console.log ステートメントを投げかけ、いくつかの方法で書き直そうとしました。APIをローカルファイルにコピーしようとしました。通常のスクリプトタグでロードしてみました。https://developers.google.com/youtube/iframe_api_referenceの API リファレンスで使用されている風変わりな DOM Modification でロードしてみました。以下のコードが機能すると確信しています。

    function youtubeAPIReady(script, textStatus, jqXHR)
    {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'CxTtN0dCDaY'
        });
    }

    function readyFunction()
    {
        $.getScript("https://www.youtube.com/iframe_api", youtubeAPIReady);
    }

    jQuery(document).ready(readyFunction);

何か助けはありますか？

4

6 に答える 6

7

http://api.jquery.com/jQuery.getScript/からの引用

コールバックは、スクリプトが読み込まれると発生しますが、必ずしも実行されるとは限りません。

呼び出した時点で API が実行されていない可能性がありますYT.Player()

于 2013-08-11T12:00:26.903 に答える
0

Simon と user151496 のアプローチを組み合わせて、この問題を解決しました。

コード：

<script>
    // load API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // define player
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640'
        });
    }

    $(function () {

       // load video and add event listeners
       function loadVideo(id, start, end) {
          // check if player is defined
          if ((typeof player !== "undefined")) {
            // listener for player state change
            player.addEventListener('onStateChange', function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    // do something
                }
            });
            // listener if player is ready (including methods, like loadVideoById
            player.addEventListener('onReady', function(event){
                event.target.loadVideoById({
                    videoId: id,
                    startSeconds: start,
                    endSeconds: end
                });
                // pause player (my specific needs)
                event.target.pauseVideo();
            });
        }
        // if player is not defined, wait and try again
        else {
            setTimeout(loadVideo, 100, id, start, end);
        }
      }

      // somewhere in the code
      loadVideo('xxxxxxxx', 0, 3);
      player.playVideo();
   });
</script>
于 2017-07-01T06:53:24.363 に答える