Блог

хотите 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=0amp;enablejsapi=1"></iframe>

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

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

Попробуйте что-нибудь вроде этого:

 <iframe id="video" src="//www.youtube.com/embed/rDT93EN_nVI?enablejsapi=1amp;html5=1amp;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

Проблема в том, что player не определено, когда вы вызываете нажатие кнопки. Это связано с тем, что API проигрывателя IFrame не загружается асинхронно (согласно документам).

Попробуйте следующий 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
});