Question

尝试添加＆＃34;暂停＆＃34;和＆＃34;播放＆＃34;在我的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>

Answer 1

你的代码工作正常你需要在脚本结束时启动onYouTubePlayerAPIReady()函数（在$(document).ready中更好的初始化）

这里是您的代码http://jsfiddle.net/wfttwmre/

的工作小提琴

如何在html iframe中使用YouTube Api？

1 个答案: