如何在iframe中找到canplay活动？

Question

我想添加一张图片，直到视频准备好播放。 出现页面加载黑屏后，当视频准备就绪时，黑屏下方的其他屏幕可见。

对于黑屏，我想在那里放一张图片。在视频标签中有“海报”的属性，但在iframe“海报”不起作用。

而且我想添加侦听器以检测视频是否准备好播放。

以下是我的代码。有什么建议吗？

youtubeLoadVideos : function () {       
    var videos = document.getElementsByClassName("youtube");
    for (var i = 0; i < videos.length; i++) {
        var youtube = videos[i];
        var iframe = document.createElement("iframe");      
        iframe.setAttribute('poster','/static/images/loading.png'); 
        iframe.setAttribute("src", "https://docs.google.com/a/oprance.com/file/d/" +youtube.id + "/preview");

        // The height and width of the iFrame should be the same as parent
        iframe.style.width = youtube.style.width;
        iframe.style.height = youtube.style.height;
        iframe.style.clear = 'both';
        iframe.style.position = 'absolute';
        youtube.parentNode.appendChild(iframe, youtube);
        //youtube.appendChild(youtube.id);
        iframe.addEventListener("canplay", function() { 
            console.log('-------');
            iframe.setAttribute('poster','/static/images/play_button5.png');    
            videos.style.display = '';  
        });     
    }
}