我是编码新手，我正在尝试学习如何使用youtube IFRAME来控制嵌入式视频。以下代码主要来自 youtube 的 api 文档。我添加的唯一内容是附加到它们的按钮和事件侦听器。
有人可以向我解释为什么我创建的"播放"按钮无法启动视频吗？
// 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> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',
width: '300',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
document.getElementById('pause').onclick = function() {
player.pauseVideo();
};
document.getElementById('play').onclick = function() {
player.playVideo();
};<html>
<body>
<div><button id= "pause">Pause</button></div>
<div><button id= "play">Play</button></div>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
</body>看起来iFrame API的文档要么过时，要么完全错误。
应该在YouTubeIframeAPIReady((上初始化播放器的函数永远不会触发，因此单击播放/暂停按钮将不起作用，因为变量播放器未定义。
要解决此问题，您必须等到加载到新创建的<script>元素中的脚本完成加载，并且在回调函数中，您需要通过调用 YT 组件自己的 ready(( 函数来初始化它。这在任何地方都没有提到。
好吧，去掉完整的onYouTubeIframeAPIReady函数，用这个代替它：
tag.onload = function() {
YT.ready(function() {
player = new YT.Player('player', {
height: '250',
width: '300',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
});
};