Optimize video in HTML 5

Navigation
5

I'm developing a website. In every header of this site will have a video, would be the same video for all 'headers'. I used the tag video of HTML5 even though it stayed like this: 

<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. in localhost I'm already seeing that it's catching a lot, imagine when to put this in the hosting. What do you advise me to do so that this does not affect the loading of my page? I already gave a decrease in quality to be able to be lower weight, so it has this size of 23 mega as it weighed more before.

    
asked by anonymous 13.12.2017 / 17:22

3 answers

2

Follow my tips.

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

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

Notice that I put muted="muted" to mute the sound. But if you can already strip the sound channel of the video before ripping. You will already narrow the file a bit.

I'll tell you about two older techniques , but sometimes you can help. The first is to leave the video in Black and White , so you can further reduce the quality of the video without greatly harming the resolution.

The other technique is almost a gambiarra, but it works by putting an overlay over your video. See the image that you will understand. With this technology feature you can further reduce the quality of the video without appearing too much. In the case of this image I used a pixelated "screen" above the video.

  

NowtheoptionIhavenottestedyet!

Makeasrcsetwithdifferentvideosfordifferentscreens.Seethecodebelow:

<video><sourcemedia="(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 ripping 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">
    
13.12.2017 / 18:12
3

Video size should not be a problem. The video format does.

I found this article discussing it . The most important is the following:

  

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. So we can not 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 mp4 is called fragmented, or mp4 streaming.

     

All in all, it's not 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 not 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 pt-BR:

  

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

     

This is not really streaming . It is a game that allows you to create an impression of streaming . MP4 is an excellent format for videos that will be downloaded but not suitable for streaming . So forget about MP4 in the context of streaming and HTML 5 and never talk about streaming with MP4.

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

    
13.12.2017 / 17:40
2

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

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scripttype="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>
    
13.12.2017 / 17:57
Is it possible to compile an app using Java and Kotlin together? What does float ("NaN") and float ("inf") mean in Python?