如何访问 iframe 的事件“onplay()”？

Posted 2023-05-09

【中文标题】如何访问 iframe 的事件“onplay()”？

【英文标题】：How to access event "onplay()" for iframe?

【发布时间】：2016-11-25 08:47:39

【问题描述】：

我在一页中有两个 iframe。

<iframe id="video"   src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe id="video1"   src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

我想访问 iframe 的onplay() 事件，然后我可以在播放第一个视频(#Video) 时停止第二个视频(#Video1) 并在播放第二个(@) 时停止第一个视频(#Video) 987654326@).

可以使用YoutubeAPI，但我不想使用它，因为我有其他 url 视频而不是 Youtube 视频（这里我放了 youtube 链接而不是原始链接以避免版权）。除了YoutubeAPI，还有其他方法吗？ YoutubeAPI 未处理其他链接资源。请提出建议。

【问题讨论】：

JS代码中无法访问跨域iframe的内容。

谢谢。是否有另一种方法可以在播放当前视频时停止其他视频。

【参考方案1】：

它有两个<iframe>。首先，您需要在iframe 之间切换。

Is there a way to change context to iframe in javascript console?

之后，这里是我的代码如何访问<iframe>的事件onPlay()

<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: 'xmhtV4270NU',
            events: 
                'onStateChange': onPlayerStateChange
            
        );
    

    function onPlayerStateChange(event) 
        if(!playing)
            alert('onPlay is clicked');
            playing = true;
        
    
</script>

【讨论】：

谢谢，但正如我提到的，我只能使用 YoutubeAPI。有没有不使用 YoutubeAPI 的其他方法。