我创建了一个新页面,特别是为了测试API.复制粘贴他们的例子时
<div id="player"></div>
和
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
一切正常.
现在当我删除它<div id="player"></div>而改为替换它
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>
它不再有效.它永远不会进入onPlayerReady或onPlayerStateChange.奇怪的是它昨晚正在工作,今天却没有.我附上了我的完整代码以防它可能有所帮助.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>
<script>
// 2. This code loads the IFrame Player API …我刚刚注意到，当我在本地进行测试时，Youtube 事件（onReady、onStateChange）不再触发，但当我将代码上传到JsFiddle时，Youtube 事件（onReady、onStateChange）不再触发。我决定从Youtube Player API复制并粘贴代码，我可以在其中验证它确实无法正常工作。还有其他人有这个问题吗？此问题出现在 Chrome、Firefox、IE、Safari 和 Opera 上。
编辑 - 当我console.log(player);在本地时，我发现它缺少很多 Youtube 功能，例如seekTo(), setVolume()，showVideoInfo()这些功能存在于 JsFiddle 中。我不确定为什么会发生这种情况，但我相信这可能是我的问题的根源。有任何想法吗？
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> …