我创建了一个包含以下代码的页面,以检测对嵌入的YT iFrame的状态更改。播放器会检测onReady
事件,但不会检测onStageChange
事件。
任何人都可以解释我在这里失踪的内容吗?
https://codepen.io/anon/pen/LOZVoX?editors=1001
代码:
<iframe id="yt-iframe" width="630" height="354" src="http://www.youtube.com/embed/CTFtOOh47oo?rel=0&?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
<script type="text/javascript">
var tag = document.createElement('script');
tag.id = 'yt-iframe';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
console.log('yt scripts loaded');
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt-iframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('video player ready');
}
function onPlayerStateChange(event) {
console.log('state has changed');
console.log(event.data);
}
</script>
答案 0 :(得分:1)
您的代码有2个错误。
首先,您的视频网址参数不正确。
您的网址为http://www.youtube.com/embed/CTFtOOh47oo?rel=0&?enablejsapi=1
,因此您传递参数rel
和amp;?enablejsapi
。
相反,您的链接应为http://www.youtube.com/embed/CTFtOOh47oo?enablejsapi=1
,参数为enablejsapi
。
您的第二个错误是,您将yt脚本的ID设置为与您的iframe ID相同。
将yt脚本的ID更改为tag.id = 'yt-script';
。