API YouTube iframe Player: управляйте НЕСКОЛЬКИМИ игроками iframe, которые уже находятся в HTML - PullRequest
Новая
       41

API YouTube iframe Player: управляйте НЕСКОЛЬКИМИ игроками iframe, которые уже находятся в HTML

0 голосов
/ 24 октября 2018

Я знаю, что этот вопрос задавался раньше.Однако ответ устарел, и мне также нужна дополнительная информация для нескольких игроков iframe.

Я следовал коду с веб-сайта разработчиков Google .Однако когда я попытался позвонить event.target.playVideo();, внутри onPlayerReady(event) function, видео не воспроизводилось при первой загрузке страницы.

Я также получил это сообщение об ошибке GET https://i.ytimg.com/vi_webp/M7lc1UVf-VE/sddefault.webp?v=516f0b27 404

Сейчас я показываю пример 2 видео и Play video 1, Stop video 1, Play video 2 и Stop video 2 работа,Когда есть много видео, как я могу настроить код, чтобы его было проще встроить?Спасибо за вашу помощь. 

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

var player1;
var player2;

function onYouTubeIframeAPIReady() {
  	
  player1 = new YT.Player('existing-iframe-example1', {
    events: {
      'onReady': onPlayerReady1
    }
  });

  player2 = new YT.Player('existing-iframe-example2', {
    events: {
      'onReady': onPlayerReady2
    }
  });

}

function onPlayerReady1(event) {
  event.target.playVideo();

  $(function() {
	
    $('#play-btn1').on('click', function() {
      event.target.playVideo();
    });

    $('#stop-btn1').on('click', function() {
      event.target.stopVideo();
    });

  });
}


function onPlayerReady2(event) {
  event.target.playVideo();
	
  $(function() {

    $('#play-btn2').on('click', function() {
      event.target.playVideo();
    });

    $('#stop-btn2').on('click', function() {
      event.target.stopVideo();
    });

  });
}
.control { margin-bottom: 30px; }
.play-btn, .stop-btn { display: inline-block; margin: 10px 20px; color: blue; cursor: pointer; }
.play-btn:hover, .stop-btn:hover { color: orange; cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="existing-iframe-example1" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>

<div class="control">
  <div id="play-btn1" class="play-btn">Play video 1</div>
  <div id="stop-btn1" class="stop-btn">Stop video 1</div>
</div>


<iframe id="existing-iframe-example2" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/5a2oZwB6zX0?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>

<div class="control">
  <div id="play-btn2" class="play-btn">Play video 2</div>
  <div id="stop-btn2" class="stop-btn">Stop video 2</div>
</div>

1 Ответ

0 голосов
/ 24 октября 2018

Исходя из этого потока , это ожидается. На самом деле мы пытаемся загрузить sddefault.jpg, если это не удалось, мы возвращаемся к hqdefault.jpg, который должен существовать для всех видео. Также по этой ссылке , если видео не работаетЕсли у вас есть максимальное разрешение изображения, вы получите ошибку 404 для maxresdefault.jpg URL.

...