检查Youtube iFrame内容是否已更改

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是官方支持的，所以你不应该在谷歌改变事情的时候支持定制的代码。