尝试在我的 HTML 文档中为 Youtube API 手动添加“暂停”和“播放”按钮。我的 JavaScript 函数无法正常工作。不知道如何插入我的 javascript 函数。我已经用脚本发布了我的文档编码。请帮助我。
<!DOCTYPE html>
<html>
<head>
<title>Chumma</title>
<style>
.button {
width: 48px;
height: 48px;
cursor: pointer;
&:hover {
fill: white;
}
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 300px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
body {
padding: 1rem;
}
</style>
</head>
<body>
<h1>Pause / Play Buttons for YouTube Videos</h1>
<iframe id="video" src="https://www.youtube.com/embed/MV_ITkqLzik?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
-->
<svg class="defs">
<defs>
<path id="pause-button-shape" d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M21,33.064c0,2.201-1.688,4-3.75,4
s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z M34.5,33.064c0,2.201-1.688,4-3.75,4
s-3.75-1.799-3.75-4V14.934c0-2.199,1.688-4,3.75-4s3.75,1.801,3.75,4V33.064z"/>
<path id="play-button-shape" d="M24,0C10.745,0,0,10.745,0,24s10.745,24,24,24s24-10.745,24-24S37.255,0,24,0z M31.672,26.828l-9.344,9.344
C20.771,37.729,19.5,37.2,19.5,35V13c0-2.2,1.271-2.729,2.828-1.172l9.344,9.344C33.229,22.729,33.229,25.271,31.672,26.828z"/>
</defs>
</svg>
<div class="buttons">
<svg class="button" id="play-button">
<use xlink:href="#play-button-shape">
</svg>
<svg class="button" id="pause-button">
<use xlink:href="#pause-button-shape">
</svg>
</div>
<script type="text" language="javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</body>
</html>
最佳答案
您的代码工作正常，您只需在脚本末尾启动 onYouTubePlayerAPIReady() 函数(最好在 $(document).ready 中初始化)
这里是您的代码的工作 fiddle http://jsfiddle.net/wfttwmre/
关于javascript - 如何在 html iframe 中使用 YouTube Api？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32821922/