YouTube 暂停、播放和停止不工作答案

【问题标题】：YouTube pause, play & stop not workingYouTube 暂停、播放和停止不工作
【发布时间】：2016-04-12 05:49:43
【问题描述】：

我想在我的页面上的任何play anchor <a> tag 上播放我的视频，如果它处于暂停状态，那么它必须开始播放。如果它处于播放状态，那么点击播放后它必须开始播放。

<script type="text/javascript" src="http://www.youtube.com/player_api">  </script>
<script>
var player;
function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
</script>

<iframe id="player" style="position: relative; height: 220px; width: 400px" src="https://www.youtube.com/embed/YL_OcLayJPg?rel=0&amp;enablejsapi=1"></iframe><br>

<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.pauseVideo(); return false">pause</a>

它可以在本地主机的 HTML 页面中工作，但不能在 PHP 文件中的服务器上工作。

它在服务器上不起作用。

【问题讨论】：

你有没有调用/调用onYouTubePlayerAPIReady？
需要在onReady事件之后绑定play/pause事件..
@RayonDabre 你能告诉我我怎样才能做到这一点吗？

标签： javascript php youtube

【解决方案1】：

play/pause 事件必须在 YT.Player 初始化中附加到 'onReady' 事件处理程序中。

var player;

function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  // bind events
  var playButton = document.getElementById("play");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });
}

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<iframe id="player" style="position: relative; height: 220px; width: 400px" src="https://www.youtube.com/embed/YL_OcLayJPg?rel=0&amp;enablejsapi=1"></iframe>
<br>

<a href="javascript: void(0)" id='play'>play</a>
<br>
<a href="javascript: void(0)" id='pause'>pause</a>

注意：您可以在<script> 中链接到它，但他们的所有文档都显示加载它async style，这对于第三方脚本总是有好处的。

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

【讨论】：