在加载电影时显示图像答案

【问题标题】：Displaying an image while the movie is loading在加载电影时显示图像
【发布时间】：2021-02-18 23:50:42
【问题描述】：

我是初学者网络开发人员。我对网站上的电影有疑问，电影大约需要 15MB，并且在 GSM 连接上加载需要很长时间。我知道它可以被压缩——我已经这样做了。现在我想在网站上显示一张图片，当电影加载完毕后，我隐藏图片并显示电影。

我做了这样的代码：

$( document ).ready(function() {
  $(".cover-video-splash-video").on("loadstart", function() {
    this.show();
  });
});

.cover-video-splash{
  background-image: url('/assets/front/videos/header/splash.jpg');
  height: 1070px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover-video cover-video-splash">
  <video width="100%" height="1080" autoplay loop muted class="cover-video-splash-video">
    <source src="{{ES::asset('/assets/front/videos/header/hp.mp4')}}" type='video/mp4'>
    <source src="{{ES::asset('/assets/front/videos/header/hp.webm')}}" type='video/webm' >
    <source src="{{ES::asset('/assets/front/videos/header/hp.ogv')}}" type='video/ogg; codecs="theora, vorbis"'/>
    <p>@lang('main.no-video')</p>
  </video>

</div>

但它并没有真正起作用，因为无论如何都会冻结页面。怎么会这样

【问题讨论】：

这能回答你的问题吗？ Make HTML5 video poster be same size as video itself

标签： javascript jquery

【解决方案1】：

查看海报属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video 这正是你想要的。

【讨论】：

是的，但是无论如何海报都会阻止整个页面的加载。我希望图像是可见的，当你加载电影时 - 然后是图像
我不确定我是否理解你想要做什么，但选择器看起来不对：$(".cover-video-splash-video")，它应该是：$(document)。准备好（功能（）{$（“.cover-video-splash-video视频”）.on（“loadstart”，function（）{$（“.cover-video-splash-video”）.show（）；} ); });

【解决方案2】：

我在想这样的事情：

$(document).ready(function () {
    let videoLoader = setTimeout(function () {
        $('.cover-video-splash').html('<video width="100%" height="1080" autoplay loop muted id="front-video-box"><source src="http://name.com/assets/front/videos/header/hp.mp4" type="video/mp4"> <source src="http://name.com/assets/front/videos/header/hp.webm" type="video/webm"> <source src="http://name.com/assets/front/videos/header/hp.ogv" type=\'video/ogg; codecs="theora, vorbis"\'/></video>');
        $('#front-video-box').trigger('play');
        /$('.cover-video-splash').removeClass('cover-video-splash', 1500);

        $( ".cover-video-splash" ).switchClass( "cover-video-splash", "newClass", 1000, "easeInOutQuad" );
        clearTimeout(videoLoader);
    }, 5000);
});

Layzu 加载视频 - 页面加载后

【讨论】：