Youtube Player api с петлей

Я борюсь с настройкой цикла для видео youtube с помощью api-устройства YouTube.

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

Вот мой код

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

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


      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',

          playerVars: {
            'controls': 0,           
            'showinfo': 0,
            'rel': 0,
            'loop': 1

          },
          videoId: 'qzZuBWMnS08',
          events: {
            'onReady': onPlayerReady,
           // 'onStateChange': onPlayerStateChange
          }
        });
      }
function onPlayerReady(event) {
        //  event.target.setLoop(true);
        event.target.playVideo();
      }

Цикл: 1, похоже, не работает. Также есть способ удалить заголовок share и video из верхней части видео.

Спасибо заранее.

Ответы

Ответ 1

Если видео не меняется, вы можете просто сделать

onStateChange: 
    function(e) {
        if (e.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
    }

Это предотвратит ненужную перезагрузку видео

Ответ 2

Как указано в документации, вам необходимо установить playlist для идентификатора видео, чтобы цикл работал.

Вам понадобится параметр showinfo, чтобы скрыть заголовок и т.д.

Ответ 3

Попробуйте это в своем onPlayerStateChange, каким-то образом Youtube хочет, чтобы вы снова включили идентификатор видео.

onStateChange: function(e){
    var id = 'qzZuBWMnS08';

    if(e.data === YT.PlayerState.ENDED){
        player.loadVideoById(id);
    }
}

Ответ 4

Это то, что я использовал для цикла видео IFrame API. Я заметил, что вы должны включить параметр "playlist: VIDEO_ID". и это работает. Это мой пример

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'VIDEO_ID',
      playerVars: {
        playlist: 'VIDEO_ID',
        loop: 1
      }
    });
  }
</script>

Ответ 5

Я получил это, чтобы дать мне цикл видео с супер низким уровнем громкости, установленным для воспроизведения видео. Вы можете отключить звук, изменив громкость от 2 до 0.

Также убедитесь, что ваше видео добавлено в список воспроизведения. По-видимому, сейчас проблема. И используйте идентификатор видео в обеих частях списка воспроизведения и видеоизображения в коде.

Я уверен, что у меня есть дополнительные шаги или избыточные шаги, как im no coder.

Я просто знаю, что это работает.

    <div id="player">
<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '600',
          videoId: 'DrrH-YTvVVc',
          playerVars: {
          playlist: 'DrrH-YTvVVc',
          loop: 1      }       ,
   events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
           event.target.setVolume(2);
       event.target.playVideo();
      }

      // 5. The API calls this function when the player state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = true;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
    //      setTimeout(stopVideo, 6000);
                  player.playVideo();
        }
           event.target.setVolume(2);
      }
</script></div>