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
      }
    });
  }

这是我获得vids列表的方式：

$.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
}