Displaying an image while the movie is loading

Question

I am beginner webdeveloper. I have a problem with the movie on the website, the movie takes about 15MB and it takes a long time to load on GSM connections. I know it can be compressed - I already did that. Now I want to display an image on the website, and when the movie is loaded, I hide the image and display the movie.

I made a code like this:

$( 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>

But it doesn't really work because from freezes the page anyway. How can this be on

Does this answer your question? [Make HTML5 video poster be same size as video itself](https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself) — angel.bonev, Nov 06 '20 at 08:51

score 0 · Answer 1 · answered Nov 06 '20 at 08:49

0

check out the poster attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video It's exactly what you want.

answered Nov 06 '20 at 08:49

Kroustou

659
5
14

Yes, but the poster blocks the loading of the page as a whole anyway. I would like the image to be visible, and when you load the movie - then image instead – trzew Nov 06 '20 at 08:55
1

I am not sure i understand what you want to do then, but the selector looks wrong: $(".cover-video-splash-video"), it should be: $( document ).ready(function() { $(".cover-video-splash-video video").on("loadstart", function() { $(".cover-video-splash-video").show(); }); }); – Kroustou Nov 06 '20 at 09:16

score 0 · Answer 2 · answered Nov 06 '20 at 09:18

I think about something like this:

$(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 loading video - after page was loaded

Displaying an image while the movie is loading

2 Answers2