Выполнение функции JavaScript при воспроизведении видео YouTube (с использованием API YouTube)

Я встраиваю видео с YouTube на свою страницу, используя следующий код:

<iframe width="400" height="300" id="newvid" src="http://www.youtube.com/embed/url?modestbranding=1&showinfo=0&feature=player_embedded&fs=0&iv_load_policy=3&rel=0" frameborder="0"></iframe>

Я пытаюсь использовать API Youtube, поэтому функция javascript будет выполняться, когда пользователь воспроизводит видео, но следующий код не работает, так как я не вижу никаких предупреждений при нажатии на видео:

<script src="https://www.youtube.com/iframe_api"></script>
<script>
      var player;

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('newvid', {
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                  myFunction();
              }
            }
          }
        });
      }
</script>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

javascript youtube-api jquery youtube-iframe-api youtube-javascript-api
person rockyraw    schedule 05.10.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Его следует настроить с помощью контейнера div, а не выбора iFrame. (Это может работать неправильно в контейнере фрагментов, однако попробуйте в своем коде).

<div id="newvid"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
      var player;

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('newvid', {
          height: '300',
          width: '400',
          videoId: 'SwxdBiazu8M', // Example video ID
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                  myFunction();
              }
            }
          }
        });
      }
</script>

<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

person JamesPark.ninja    schedule 05.10.2016
comment
Спасибо, это работает, хотя, если это единственный способ, я полагаю, что должен использовать соответствующий атрибут playerVars, чтобы включить все параметры, которые я использую, - person rockyraw; 05.10.2016

arrow_upward
0
arrow_downward

Ниже код демонстрирует и выполняет JS function с использованием enablejsapi в iframe -

<!doctype html>
<html>
<body>
<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/YtF6p_w-cSc?autoplay=1&controls=0&enablejsapi=1" frameborder="0"></iframe>

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

  // 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',      
      events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                  myFunction();
              }
            }
          }  
    });           
  }

  function myFunction() {
    alert("I am an alert box!");
}
</script>
</body>
</html>

Вот JSFiddle

В соответствии с приведенным выше кодом JS function будет вызываться, как только playerstate станет PLAYING. Надеюсь, это поможет вам, и вы ищете то же самое. Кроме того, пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

Спасибо..!

person PPB    schedule 06.10.2016