Possible to add an onclick event to a YouTube ifra

2019-02-18 19:07发布

站内问答 / JavaScript
1776 1 6

I've got a site with an HTML5 audio player and embedded YouTube music videos. I'd like to make it so that when the user clicks on a YouTube video to play it the music will stop. Wrapping the iframe in

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

works for the sliver of pixels outside of the iframe, but not when you click on the actual video. Anyone have any ideas?

1条回答
Explosion°爆炸
2楼-- · 2019-02-18 19:52

You should use the YouTube IFrame API. Add an event listener for onStateChange to get notified when the player's state changes. See the sample code below.

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)