合并2个YouTube API?

时间:2016-07-25 12:03:41

标签: javascript api video youtube youtube-api

我想显示YouTube频道的最后一个视频,并使用数据API在播放视频时更改背景。

但我还不太了解API,我成功地从频道(iframe API)获取最后一个YouTube视频,并使用数据API作为背景,但不是在一起。

如何组合它们?

来自频道代码的最后一个视频:



<iframe width="640" height="390" src="http://www.youtube.com/embed?max-results=1&controls=1&showinfo=0&listType=user_uploads&list=GoogleDevelopers" frameborder="0" allowfullscreen></iframe>
&#13;
&#13;
&#13;

使用YouTube数据API改变背景的小提琴:

https://jsfiddle.net/LightBen/rjuph7jw/1/

谢谢=)

1 个答案:

答案 0 :(得分:1)

您也可以在现有的iframe上使用youtube API,这意味着您可以在问题中显示iframe,并在其上显示添加 API功能。

就像在这段代码中一样:

var tag = document.createElement('script');

tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
window.onYouTubeIframeAPIReady = function() {
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

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

function onPlayerStateChange(event) {
  switch(event.data) {
    case 1:
      $('body').addClass('play');
      break;
    case 2:
      $('body').removeClass('play');
  }
}
body { 
  margin: 0; 
  transition: background-color 0.2s; 
}

.container { 
  width: 100%; 
  max-width: 1200px; 
  margin: 0 auto; 
  background-color: #eee; 
  padding: 10rem 3rem; 
  transition: background-color 0.2s; 
  text-align: center; 
}

body.play, .play .container { 
  background-color: #000; 
}

iframe { 
  margin: 0 auto; 
}
<div class="container">
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <iframe id="player" width="640" height="390" src="http://www.youtube.com/embed?max-results=1&controls=1&showinfo=0&listType=user_uploads&list=GoogleDevelopers&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

查看实际操作:http://output.jsbin.com/fologu