Question

我有一个包含HTML5音频播放器和嵌入式YouTube音乐视频的网站。我想这样做，以便当用户点击YouTube视频播放时，音乐将停止。在

中包装iframe

<div id='vidWrapper' onclick='pauseAudio()'>YT stuff</div>

适用于iframe之外的像素条，但是当您点击实际视频时则不行。有人有什么想法吗？

Answer 1

您应该使用YouTube IFrame API。为onStateChange添加一个事件监听器，以便在玩家状态发生变化时收到通知。请参阅下面的示例代码。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://www.youtube.com/iframe_api"></script>
  </head>
  <body>
    <div id='vidWrapper'>
      <!-- The <iframe> (and video player) will replace this <div> tag. -->
      <div id="ytplayer"></div>
    </div>

    <script>
      var player;

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                pauseAudio();
              }
            }
          }
        });
      }

      function pauseAudio() {
        ...
      }
    </script>
  </body>
</html>

可以在YouTube iframe上添加onclick事件吗？

1 个答案: