我希望能够通过<input type="text">字段设置要从用户输入播放的视频ID。
我天真的尝试看起来像这样
<!DOCTYPE html>
<html>
<body>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
<script>
function loadVideo() {
var ytplayer = document.getElementByID("ytplayer");
var videoid = document.getElementByID("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
</body>
</html>
但播放器小部件在输入ID并点击"加载"后仍然是空白的。
怎么了?
- 在使用函数之前定义它。只需将
<script>移动到<button>之上 - 你有一个拼写错误两次
getElementById有一个小写的"d"。
最后看起来像这样:
<!DOCTYPE html>
<html>
<body>
<script>
function loadVideo() {
var ytplayer = document.getElementById("ytplayer");
var videoid = document.getElementById("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
</body>
</html>
我不能帮助你任何进一步的然而，因为你的例子不工作后，这两个事情是固定的，因为它不包含所有需要使其工作的代码