當網頁加載後，暫停和靜音屏幕出現，並在一段時間後出現實際的視頻屏幕。如何解決這個問題？

Question

1）當網頁加載時出現此第一個屏幕。 （屏幕1）

2）上述屏幕該屏幕配的幾秒鐘後。 （屏幕2）

爲什麼這個屏幕1來？我應該如何消除該錯誤？ 我只是想在網頁加載後屏幕2（視頻）應該出現/顯示。

我該怎麼做？我是新的這個視頻嵌入，所以請幫助。

我參考代碼：

dropboxVideo : function(){ 
    new_video = document.createElement('video'); 
    new_video.setAttribute('controls','true'); 
    new_video.setAttribute('preload','none');//autoPlay: false, 'preload':'auto' 
    video = document.getElementById('RIZfC358yRk').appendChild(new_video); 
    source = document.createElement('source'); 
    source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4'); 
    video.appendChild(source); 
    video.load(); 
} 

Answer 1

我一直在尋找一個內置的解決方案，但它似乎有沒有。 所以我編寫的東西是你在找什麼結果：

<div id="videoelt" style="display:none" ></div> 
<script> 
function dropboxVideo(){ 
    var videoElt = document.getElementById('videoelt'); 
    new_video = document.createElement('video'); 
    new_video.setAttribute('controls','true'); 
    //new_video.setAttribute('preload','none');//autoPlay: false, 'preload':'auto' 
    new_video.setAttribute('autoplay','true');//autoPlay: false, 'preload':'auto' 

    //new_video.setAttribute('poster','foo.jpg'); 
    source = document.createElement('source'); 
    source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4'); 
    new_video.appendChild(source); 
    videoElt.appendChild(new_video); 

    new_video.addEventListener("canplay", function(e) { 
     videoElt.style.display = ''; 
    }); 
} 

dropboxVideo(); 
</script> 

視頻元素具有可以聽的「canplay」適合它啓動的瞬間事件。 因此，我隱藏了視頻控件，直到準備就緒，然後顯示它。 另一種可以使用視頻元素的「海報」屬性的選項。放置一些圖片，用於暗示即將播放的內容。