HTML5 Video Fallback Image加載雜亂

Question

我的html5視頻預加載設置中有一個後備海報圖像，當加載視頻時等待實際視頻加載時加載混亂，然後突然消失。我的問題是我可以更加整潔地編碼這個過渡，我怎麼能不讓圖像閃爍，然後在視頻加載之前就這麼雜亂地消失？另外，當無法加載視頻時，例如在移動設備和手持設備上，如何刪除渲染到後備圖像的播放按鈕？

這裏是我的設置：

<div class = "sudirlayheader-container"> 
    <div class = "sudirlayvideo-container"> 
     <video preload = "auto" autoplay = "autoplay" loop = "loop" volume = "0" poster="video/Dubai-Wallpaper.png"> 

    <source src = "video/sudirlayvid.mp4" type = "video/mp4"> 
    <source src = "video/sudirlayvid.ogg" type = "video/ogg"> 
    <source src = "video/sudirlayvid.webm" type = "video/webm"> 
    <source src = "video/sudirlayvid.mov" type = "video/mov"> 


     </video> 

</div> 
</div> 

Answer 1

我發現我自己的解決方案，顯然是因爲我本來有HTML5的代碼是正確的和做事情的最好方法，但以平穩過渡的方式主要是公正的以我的名義編輯css和圖片方案。所以總結一下，我只是拍攝了主圖片的快照，並且減輕了框架的影響，因此，如果視頻加載但需要時間，則後備圖像看起來只是一種很酷的淡入淡出效果，而CSS則用於刪除播放按鈕視頻無法在移動加載/和手持設備等

現在我主要的CSS是這樣的：

.header-container { 
    width: 100%; 
    height: 900px; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    padding: 20px; 
} 

.video-container { 

    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 

} 

video { 
    position: absolute; 
    z-index: -1; 
    opacity: 1; 
    width: 100%; 

} 

聲明本線修復顯示後備圖片上了奇怪的按鈕時，視頻犯規負載

video::-webkit-media-controls-start-playback-button { 
    display: none; 
}