HTML5 Video Fallback Image Issue Загрузка Messy

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; 
}