Блог

Я пишу это после того, как провел день, прежде чем попробовать все решения, которые я нашел, но безуспешно (некоторым решениям более семи лет).

Реальная проблема заключается в том, чтобы заставить состояние видео остановить изменение слайда в слайдере.

Поэтому я сузил проблему, используя пример из документации, чтобы просто знать, что я делаю неправильно.

Я использую не пустой div, а iframe.

В примере видео должно воспроизводиться в onPlayerReady, но этого не происходит.

Я надеюсь, что вы сможете мне помочь. Спасибо.

Документация по API: https://developers.google.com/youtube/iframe_api_reference

Код (https://jsfiddle.net/migrad/xa8vdyn1/5/):

HTML:

     <iframe id="player" width="100%" height="87%" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0amp;enabledjsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

Язык JavaScript:

     var player;

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

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

function onYouTubeIframeAPIReady() { 
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING amp;amp; !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}
function stopVideo() {
  player.stopVideo();
}