HTML5ビデオフォールバック画像の問題Loading messy

Question

私のhtml5ビデオプリロード設定内にフォールバックポスター画像があります。実際のビデオが読み込まれるのを待つ間に読み込みが遅くなり、ビデオが読み込まれると突然消えます。私の質問は、このトランジションをよりきれいにコーディングすることができます。そして、ビデオがロードされる直前に、イメージのフラッシュを消してしまわないようにするにはどうすればいいですか？また、モバイル/携帯端末などの動画を読み込めない場合、再生ボタンを削除して代替画像にレンダリングする方法はありますか？私は自分のソリューション、どうやら私がもともと持っている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

主だけである：ここでは

は私の設定です私のために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%; 

} 

お知らせこの行は、ときビデオdoesntの負荷代替画像上に表示奇妙なボタンを修正

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