javascript - YouTube 暂停、播放和停止不起作用

Question

我想在任何 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 文件中工作。

它无法在服务器上运行。

Answer 1

play/pause events must be attached inside 'onReady' event handler in YT.Player initialization.

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);