What is the ideal size for mp4 video at the bottom of the page

Asked

Viewed 1,929 times

1

I want to implement on page 404 an mp4 video and I took the video of this website in the size 1920 x 1080 with 3.3 MB and 0:09 sec. My concern is whether this size will get too slow. This is the first time I’ve created this kind of page. Could you help me? I need to know if the video size is good and I’m doing it the right way. Below is the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Página não Encontrada</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body, html{
                width: 100%;
                height: 100%;
                font-family: sans-serif;
                font-size:22px;
                line-height: 1.3;
                 overflow: hidden;
            }
            .bg_video{
                position: fixed; 
                right: 0; 
                bottom: 0;
                min-width: 100%; 
                min-height: 100%;
                width: auto; 
                height: auto; 
                z-index: -1000;
                background-size: cover; 
            }
            .body{
                padding:20px;
                background: rgba(255,255,255,0.9);
                margin: 10% auto 20px auto;
                max-width: 960px;
                border-radius: 10px;
            }
            .body h1{
                font-family: Georgia, serif;
                font-size:40px;
            }
            .body p{
                margin: 1.6em 0;
            }
        </style>
    </head>

    <body>
        <video autoplay loop class="bg_video">
            <source src="video/fundo.mp4" type="video/mp4">
        </video> 
        <div class="body">
                  OPS... PÁGINA NÃO ENCONTRADA! ( Aqui entrará o restante do texto com o mapa do site! )
        </div>
    </body>
</html>
html html5

  • How long is this video? 3MB is really heavy for this type of application.

2 answers

7


I listed below some recommendations for using a video like background. I hope I can help:

✓. Remove the audio

Remove audio from video. Recode video by deleting audio channels, if any. It is unpleasant to access a website with video in the background and audio. In addition, it will greatly reduce the file size.

✓. Short video

Video as background serves more for the page’s visual effect than to display it to the audience. So a few seconds video is ideal, with a loop without there being delay between the end and the restart.

✓. Size is important

Uploading heavy-duty video can slow down your website and harm the user experience. Ideally, you can reduce the resolution and the bitrate until it reaches a minimum level of satisfactory quality. A resolution of 720p or 480p with bitrate 500 to 700kb/s can be enough and will considerably reduce the file weight.

✓. Incompatible mobile devices/browsers

They don’t run videos as background or don’t support tag video. It is interesting to include the attribute poster on the tag <video>, that will display a static image related to the video as background:

<video autoplay loop class="bg_video" poster="imagem.jpg">

  • Thank you all.

2

My tips,

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/1frame-do-video.jpg">

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

Take advantage of and decrease video Frames. Currently it is common to see videos in up to 60fps, but often something between 20 and 24fps are already enough to have a good perception of the fluids of the scene.

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

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 you can further decrease the video quality without looking too much. See the image below for an example:

inserir a descrição da imagem aqui

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">

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.