如何在html iframe中使用YouTube Api

尝试在我的HTML文档中为Youtube API手动添加"暂停"one_answers"播放"按钮。我的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中初始化)

这里的工作小提琴与您的代码http://jsfiddle.net/wfttwmre/

相关内容

最新更新

热门标签：