问题描述

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

I need to fire an event on play of a youtube iframe. So when the play button is pressed I need to call a function to hide the span.module-strip

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

I've tried this but maybe I'm going down the wrong path?

$("#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" width="640" height="360"></iframe>
</div>

推荐答案

• 演示:https://so.lucailosofi.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>

这篇关于在播放 youtube iframe 嵌入时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！