Combining 2 YouTube APIs?
Combining 2 YouTube APIs?
我想显示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>
改变背景与YouTube数据的Fiddle API:
https://jsfiddle.net/LightBen/rjuph7jw/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
相关文章:
- 有可能过滤来自嵌入式YouTube的声音吗
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- html5视频中的Youtube类型注释
- 链接和youtube的Javascript和regex
- YouTube作为弹出窗口在桌面版本上播放,但不在移动设备上播放
- 使用javascript将视频从我的android应用程序上传到youtube
- internet explorer 8兼容模式下的Youtube api错误
- 如何用低音量自动启动Youtube视频(iframe)
- 可以't从Youtube IFrame更改焦点
- 使用HTML5播放器时使用Javascript更改Youtube视频
- 可以't根据设备自动调整youtube播放器的大小
- Youtube JavaScript API不是't正在初始化
- 有没有办法在dailymotion播放器的新测试版中播放youtube视频
- 在Android Kitkat上模拟鼠标点击Youtube视频
- HtmlUnit无法在youtube上完全加载页面
- 我们如何在dailymotion播放器的新测试版中播放youtube视频
- Lightbox关闭时停止播放Youtube视频
- 未为youtube执行Firefox Addon Pagemod
- Combining 2 YouTube APIs?
- Multiple Youtube Iframe APIs