如何在 html iframe 中使用 YouTube Api？

Question

正在尝试在我的 HTML 文档中为 Youtube API 手动添加 "Pause" 和 "Play" 按钮。我的 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>

Answer 1

您的代码工作正常，您只需在脚本末尾启动 onYouTubePlayerAPIReady() 函数（最好在 $(document).ready 中启动）

此处使用您的代码 fiddle http://jsfiddle.net/wfttwmre/

如何在 html iframe 中使用 YouTube Api？

How to use the YouTube Api in html iframe?

javascript

api

youtube-api