Youtube iFrame API如何在获取视频列表后调用IframeAPIReady函数

Question

我自己制作简单的Youtube视频播放器，我想知道在获得视频列表后如何调用onYouTubeIframeAPIReady()。

我喜欢做的是将列表中的第一个视频显示为初始视频。

在我的html某处：

<script src="//www.youtube.com/iframe_api"></script>

这是来自官方示例代码的初始iframe嵌入代码：

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player-box', {
      // height: '390',
      // width: '640',
      videoId: {FIRST_VIDEO_ID},
      events: {
        'onReady': onPlayerReady,
        // 'onStateChange': onPlayerStateChange
      }
    });
  }

以下是我获取视频列表的方法：

$.getJSON(
    'https://www.googleapis.com/youtube/v3/videos',
    {
      part: 'snippet',
      id: {VIDEO_IDs},
      key: {MY_API_KEY},
    },
    function(data) {
      var items = data.items;
      console.log(data);

      // cannot put onYouTubeIframeAPIReady here...
    }
  );

我想我不能把onYouTubeIframeAPIReady()作为$.getJSON的回调，因为它是在脚本之外调用的。

Answer 1

我自己有点解决这个问题。

我把所有东西都包裹在var onYouTubeIframeAPIReady = function() {...里面

这是我的做法：

var onYouTubeIframeAPIReady = function() {

var videos = '{VIDEO_ID1}, {VIDEO_ID2}, {VIDEO_ID3}';

$.getJSON(

  'https://www.googleapis.com/youtube/v3/videos',
  {
   part: 'snippet',
   id: videos,
   key: {MY_API_KEY},


 },
  function(data) {
    var items = data.items;
    console.log(items);

    $.each(items, function(i, video){
      console.log(video);
    });

    var player;
    player = new YT.Player('player-box', {
      // height: '390',
      // width: '640',
      videoId: {INITIAL_VIDEO_ID},
      events: {
        'onReady': onPlayerReady,
        // 'onStateChange': onPlayerStateChange
      }
    });


    function onPlayerReady(event) {
      event.target.playVideo();
    }

    var done = false;
    function onPlayerStateChange(event) {
      // console.log(event.data);
      // if (event.data == YT.PlayerState.PLAYING && !done) {
      // everytime change vids playing for 6secs then stop
      if (event.data == YT.PlayerState.PLAYING) {
        setTimeout(stopVideo, 6000);
        done = true;
      }
    }
    function stopVideo() {
      player.stopVideo();
    }


  }//$.getJSON callback

}