Optimize HTML video 5

Question

I’m developing a website. In each header this site will have a video, it would be the same video for all headers. I used the tag video of HTML5 even stayed and so:

<div class="video-institutional hidden-xs hidden-sm">
    <video muted autoplay>
        <source src="images/video/about-video.mp4" type="video/mp4">
        Seu navegador não suporta esse formato de vídeo
    </video>
    <div class="text-video">
        <h2 class="title">Bem-vindo! Somos a Deep Ocean</h2>
        <p class="description">A Deep Ocean é uma agência de comunicação especializada no planejamento estratégico, criação e marketing, principalmente para projetos que fazem uso da plataforma interativa, em especial a internet.</p>
        <a href="#sobre-deep" class="prt_btn about-btn">Conheça nossa história</a>
    </div>
</div>

This video weighs 23 mega. no localhost I can already see that it is locking enough, imagine when to put this in the lodging. What do you recommend I do so that it does not influence the loading of my page? I’ve already given a diminished quality to be able to stay with less weight, so it has this size of 23 mega because it weighed more before.

Answer 1

Follow my lead.

First add a poster poster="1frame-do-video.jpg" in your tag of <video> and place the attribute preload="auto". So while the video does not load is the background image and not the blank screen. Type like this.

<video id="video-elem" preload="auto" muted="muted" poster="img/sader-poster.jpg"> 

Notice that I put muted="muted" to take out the sound. But if you can already take out the sound channel from the video before ripping. It will already decrease the file a little.

I’ll tell you about two older techniques, but that for you sometimes can help. The first is to leave the video in Black and White, so vc can further decrease the video quality without harming the resolution too much.

The other technique is almost a gambiarra, but it works by putting one overlay over your video. See the image you will understand. With this technological resource vc can further decrease the video quality without looking too much. In the case of this image I used a "screen" pixelated over the video.

Now the option I haven’t tested yet!

Make a srcset with different videos for different screens. See the code below:

<video>
    <source media="(min-width: 500px)" srcset="seuvideo-low.mp4" type="video/mp4" preload="auto" muted="muted" poster="img/frame-do-video.jpg">
    <source media="(min-width: 960px)" srcset="seuvideo-medio.mp4" type="video/mp4" preload="auto" muted="muted" poster="img/frame-do-video.jpg">
    <source media="(min-width: 1024px)" srcset="seuvideo-hi.mp4" type="video/mp4" preload="auto" muted="muted" poster="img/frame-do-video.jpg">
    I'm sorry; your browser doesn't support HTML5 video.
</video>

And lastly you can try to rip the video in other formats that are better for web.

<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg"> 
<source src="foo.mov" type="video/quicktime">

Answer 2

Video size should be no problem. Video format yes.

I found this article that discusses this. The most important thing is this::

Here’s Where this Whole "mp4 streaming", which Works like Webm, comes from. The Thing is, in the Beginning of a regular mp4-Compressed video file, the size of the Whole container is defined. Thus we can’t stream live via mp4. In order for it to work, there’s a Trick: send mp4 without frames and append Blocks of frames several Seconds long. This is what is called mp4 fragmented, or mp4 streaming.

All in all, it’s no streaming at all. It’s a Crutch that Lets you create an Impression of one. Mp4 is a Great format for downloadable videos but it’s no fit for video streaming. So it’s safe to Forget about mp4 in the context of HTML5 streaming and just Never Say "mp4 streaming."

In en:

This is where the whole streaming with MP4. Fact is, at the beginning of an MP4 video, the entire container size is set. So you can’t do streaming with MP4. To work, a trick is used: send the video without frames and concatenate blocks of frames of several seconds. This is what we call fragmented MP4, or streaming with MP4.

That’s not streaming true. It is a gambiarra that allows you to create an impression of streaming. MP4 is an excellent format for videos that will be downloaded but no good for streaming. So forget MP4 in the context of streaming and HTML 5 and never speak of streaming with MP4.

The author also suggests using other formats, such as MPEG-DASH and HLS. I suggest experimenting with these formats and see the result.

Answer 3

You can place your video to load after the page and all its contents are loaded. Example:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script type="text/javascript" >
            //Esse trecho só é executado depois da página ser completamente carregada     
            $(window).bind("load", function() {
                console.log("Carregando vídeo");
                var video = $("#meuVideo").get(0);
                video.load();   //manda o vídeo carregar
                video.play();   //manda o vídeo ser reproduzido
            });
        </script>
    </head>
    <body>
        <!-- preload="metadata" faz com que só algumas informações do vídeo sejam carregadas -->
        <video id="meuVideo" muted preload="metadata">
            <source src="images/video/about-video.mp4" type="video/mp4">
            Seu navegador não suporta esse formato de vídeo
        </video>
    </body>
</html>