我希望能够控制基于iframe的YouTube播放器.这些播放器已经在HTML中,但我想通过JavaScript API控制它们.
我一直在阅读iframe API的文档,该文档解释了如何使用API向页面添加新视频,然后使用YouTube播放器功能控制它:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('container', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Run Code Online (Sandbox Code Playgroud)
该代码创建一个新的播放器对象并将其分配给"播放器",然后将其插入#container div中.然后,我可以在"播放器"和呼叫操作playVideo(),pauseVideo()就可以了,等等.
但我希望能够对已经在页面上的iframe播放器进行操作.
我可以使用旧的嵌入方法很容易地做到这一点,例如:
player = getElementById('whateverID');
player.playVideo();
Run Code Online (Sandbox Code Playgroud)
但这不适用于新的iframe.如何在页面上分配iframe对象,然后在其上使用API函数?
我有一个滑块,其中包含4个通过iframe嵌入代码嵌入的YouTube视频
http://www.youtube.com/embed/'.$i.'?enablejsapi=1
我试图让onStateChange四个视频中的任何一个事件调用我调用的函数stopCycle(),当视频开始播放时,它将停止滑块.iframe没有id.我不确定如何正确地捕捉这个事件,并且可以使用任何关于我做错的建议.
<script charset="utf-8" type="text/javascript" src="http://www.youtube.com/player_api"></script>
var playerObj = document.getElementById("tab2"); // the container for 1 of the 4 iframes
playerObj.addEventListener("onStateChange", "stopCycle");
function stopCycle(event) {
alert('Stopped!');
}
Run Code Online (Sandbox Code Playgroud) Hello Stack Overflow社区,
我是一个相当新手的编码员,但我有一个我设计的项目,每天看起来越来越复杂,我不知道从哪里开始.
从Synchtube和Phonoblaster获取灵感,我希望为我的网站创建一些内容,让访问者可以实时,同步地观看我策划的YouTube视频和播放列表.
因为我希望能够将它放在我自己网站的上下文中,所以我不能使用已经执行此操作的上面列出的服务 - 所以我想弄清楚如何自己动手.
关于Stack Overflow和其他博客的一些关于这个主题的文章: HERE 和HERE.
因为我仍然认为自己是一名新手程序员,而且我在Google和Stack上发现的很多信息往往超过1或2年,我仍然不确定从哪里开始或者这些信息是否过时.具体来说,我应该学习哪些语言和工具.
从我到目前为止收集的内容来看,Javascript,Node.JS和YouTube API等内容将成为它的关键.我以前没有使用过任何这些,但是有兴趣看看其他有经验的编码员是否会有自己的建议或想法,他们可以指出我.
感谢您抽出时间阅读这篇文章!希望很快能听到你们中的一些人:)
非常感谢.