javascript - 如何在 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 = '';  
        });     
    }
}