播放YouTube视频时执行JavaScript功能(使用YouTube API) [英] Execute JavaScript function when YouTube video is played (using YouTube API)

问题描述

我正在使用以下代码在页面上嵌入youtube视频:

I'm embedding a youtube video on my page using the following code:

<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函数，但是以下代码不起作用，因为单击视频时看不到任何警报:

I'm trying to use the Youtube API, so a javascript function will be executed once user is playing the video, but the following code doesn't work, as I don't see any alert showing when clicking the video:

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

推荐答案

应使用div容器进行设置，而不要选择iFrame. (这可能无法在代码段容器中正确运行，但是请尝试输入您的代码.)

It should be set up with a div container rather than selecting the iFrame. (This may not run correctly in the snippet container, however please try in your code).

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

这篇关于播放YouTube视频时执行JavaScript功能(使用YouTube API)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！