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

HTML5视频后备图像问题加载凌乱

1 个答案: