javascript - iframeでcanplayイベントを見つける方法は?

Question

ビデオを再生する準備が整うまで、画像を 1 つ追加したいと考えています。ページのロード後に黒い画面が表示され、ビデオの準備が整うと、黒い画面の下に別の画面が表示されます。

黒い画面の場合、そこに 1 つの画像を配置します。Video タグには「poster」のプロパティがありますが、iframe では「poster」が機能しません。

また、ビデオを再生する準備ができているかどうかを検出するリスナーを追加したいと考えています。

以下は私のコードです。何か提案はありますか？

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 = '';  
        });     
    }
}