Question

我有iframe，最初不包含视频。当用户按下按钮时，将加载Youtube视频。为了检测Youtube视频何时完成加载，我使用on()来检测Youtube iframe的DOM结构何时被修改。目前，当视频加载时，我在控制台中看不到Video Loaded消息。我的逻辑是不正确的？

<div id="button">BUTTON</div>

<div id="container">
    <iframe id="ytplayer" class="hide" type="text/html" width="840" height="470" 
    src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
</div>

$(document).ready(function() {
    $('#button').click( function() {
        $('#ytplayer').attr('src', 'https://www.youtube.com/embed/w7bccxRvxDc?rel=0&showinfo=0');
    });  
    $('#container').on('DOMNodeInserted', '#ytplayer', function() {
        console.log('Video Loaded');
    });    
});

Answer 1

您可能需要查看YouTube iframe API。它支持许多事件，包括加载视频时。该API已获得官方支持，因此您无需支持自定义内置代码，以防Google在未来发生变化。

检查Youtube内部的内容是否已更改

1 个答案: