播放 YouTube 视频时执行 JavaScript 函数（使用 YouTube API）答案

【问题标题】：Execute JavaScript function when YouTube video is played (using YouTube API)播放 YouTube 视频时执行 JavaScript 函数（使用 YouTube API）
【发布时间】：2017-02-14 02:56:09
【问题描述】：

我正在使用以下代码在我的页面上嵌入一个 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>

我正在尝试使用 Youtube API，因此一旦用户播放视频，就会执行一个 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 jquery youtube-api youtube-javascript-api youtube-iframe-api

【解决方案1】：

应该使用 div 容器进行设置，而不是选择 iFrame。（这可能无法在 sn-p 容器中正确运行，但请在您的代码中尝试）。

<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>

【讨论】：

谢谢，它有效，但如果这是唯一的方法，我想我必须相应地使用playerVars 属性来包含我正在使用的所有参数，

【解决方案2】：

下面的代码演示和执行JS function 在iframe 中使用enablejsapi -

<!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

根据上面的代码，一旦playerstate 是PLAYING，就会调用JS function。希望这会对您有所帮助，并且您正在寻找相同的东西。另外，如果您有任何问题，请告诉我。

谢谢..！

【讨论】：