在播放 youtube iframe embed 时触发事件

Posted 2023-02-24

【中文标题】在播放 youtube iframe embed 时触发事件

【英文标题】：Fire an event on play of youtube iframe embed

【发布时间】：2014-07-25 05:52:16

【问题描述】：

我需要在播放 youtube iframe 时触发一个事件。因此，当按下播放按钮时，我需要调用一个函数来隐藏 span.module-strip

我已经尝试过了，但也许我走错了路？

$("#home-latest-vid")[0].onplay = function() 
    alert('hi');
;

html：

<div class="module module-home-video">

    <span class="module-strip">Latest Product Video</span>

        <iframe id="video" src="http://www.youtube.com/embed/RWeFOe2Cs4k?hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0"  ></iframe>
</div>

【问题讨论】：

你想在哪里触发事件，在 iframe 代码中，还是在父代码中？

我想在父节点上触发事件

这可能会有所帮助：“从 iFrame 中获取元素”***.com/questions/1088544/…

【参考方案1】：

您应该能够使用 youtube javascript api，执行以下操作：

var ytplayer = null;

// event that will be fired when the player is fully loaded
function onYouTubePlayerReady(pid) 
   ytplayer = document.getElementById("ytplayer");
   ytplayer.addEventListener("onStateChange", "onPlayerStateChange");


// event that will be fired when the state of the player changes
function onPlayerStateChange(state) 
  // check if it's playing
  if(state == 1) 
    // is playing
  

要在嵌入式播放器中加载您的视频，您可以使用以下网址：

http://www.youtube.com/v/RWeFOe2Cs4k?version=3&enablejsapi=1

我也认为你应该可以像这样直接添加iframe：

<iframe id="ytplayer" type="text/html"   
 src="https://www.youtube.com/embed/RWeFOe2Cs4k?enablejsapi=1"
 frameborder="0" allowfullscreen>

参考：Youtube Javascript Player API

【讨论】：

已弃用，请勿使用！

我们应该怎么做@MārtiņšBriedis？

【参考方案2】：

演示：https://so.lucafilosofi.com/fire-an-event-on-play-of-youtube-iframe-embed/

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

<div class="module module-home-video">
    <span class="module-strip">Latest Product Video</span>
    <div id="video"></div>
</div>

<script>
    var player, playing = false;
    function onYouTubeIframeAPIReady() 
        player = new YT.Player('video', 
            height: '360',
            width: '640',
            videoId: 'RWeFOe2Cs4k',
            events: 
                'onStateChange': onPlayerStateChange
            
        );
    

    function onPlayerStateChange(event) 

      if (event.data == YT.PlayerState.PLAYING) 
         alert('video started');
         playing = true;
        

      else if(event.data == YT.PlayerState.PAUSED)
            alert('video paused');
            playing = false;
       

</script>

【讨论】：

好东西，嵌入 vimeo iframe 的过程是否类似？

我们如何使用列出的多个 iframe 来做到这一点，因此我们不需要添加高度、宽度和视频 id 参数，因为这些已经在 html iframe 标签中提供了？那么如何使用这个 jquery 管理这个所有 iframe 视频链接呢？

找不到演示网址 404

【参考方案3】：

player.getPlayerState():Number 返回播放器的状态。

https://developers.google.com/youtube/iframe_api_reference

 /* 
      * player.getPlayerState():Number
      *
      * -1 – unstarted
      *  0 – ended
      * 1 – playing
      *  2 – paused
      *  3 – buffering
      *  5 – video cued
      *
      */
      function checkIfPlaying()
        var playerStatus = player.getPlayerState();

         return  playerStatus == 1;