通过单击按钮播放 youtube 视频

Question

想要play - stop - pause - 点击相应按钮观看 youtube 视频
根据几个教程 - 此代码应该可以工作 - 但它没有
第一次点击 btnplay - youtube 徽标已被移除，它似乎会播放 - 仅此而已
每次点击 - 什么都没有发生

<script src="https://www.youtube.com/iframe_api"></script>
<button id='btnplay'>PLAY</button>
<iframe id="player" src="https://www.youtube.com/embed/rDT93EN_nVI?rel=0&enablejsapi=1"></iframe>

function onYouTubeIframeAPIReady(){
    player = new YT.Player('player');
}

$(btnplay).on('click', function(){
    console.log('clicked'); // works
    player.playVideo();  // doesn't work
});

Answer 1

问题是当您调用按钮单击时，player 未定义。这是因为 IFrame Player API 不是异步加载的（根据 docs）

试试下面的javascript：

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;

function onYouTubeIframeAPIReady(){
    player = new YT.Player('player');
}

$(btnplay).on('click', function(){
    console.log('clicked'); // works
    player.playVideo();  // doesn't work
});

Answer 2

试试这样的：

<iframe id="video" src="//www.youtube.com/embed/rDT93EN_nVI?enablejsapi=1&html5=1&mute=1" frameborder="0" allowfullscreen></iframe>

<button id="btnplay">PLAY</button>

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player("video", {
    events: {
      // call this function when player is ready to use
      onReady: onPlayerReady
    }
  });
}

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

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

参考：https://developers.google.com/youtube/iframe_api_reference