在加载电影时显示图像

Posted 2023-05-07

【中文标题】在加载电影时显示图像

【英文标题】：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   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

【参考方案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   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 加载视频 - 页面加载后