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

Question

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

Navigation

#1 by (7 votes)
#2 by (2 votes)

1

I want to implement a video mp4 page on page 404 and I've taken the video from that site > at 1920 x 1080 size with 3.3 MB and 0:09 sec. My concern is whether this size will be too slow. This is the first time I create this kind of page. can you help me? I need to know if the video size is good and if I'm doing it right. Here 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

asked by anonymous 07.01.2018 / 23:56

2 answers

2

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/1frame-do-video.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 . Removing or decreasing Birate will decrease the file a bit.

Leverages and lowers Video Frames. It is currently common to watch videos at up to 60fps, but often something between 20 and 24fps is enough to get a good feel for the scene fluids.

I'll tell you about two older techniques, but that can help you sometimes. The first is to leave the video in Black and White, so you can further reduce the quality of the video without damaging 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. See the image below for an example:

Andlastlyyoucantryrippingthevideoinotherformatsthatarebetterforweb.

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

Documentation about tag <video> : link
Video format reference for the Web: link
Android Video Formats: link
Video Formats for iOs: link

08.01.2018 / 11:40

Mysterious Square Regex with javascript to capture words between two characters

score 7 · Accepted Answer

I have listed below some recommendations for using a video as background . I hope it can help:

✓ . Remove audio

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

✓ . Short video

Video as background serves more to visual effect of the page than to display it to the public. So a few seconds video is ideal, with a loop without delay between the end and the restart.

✓ . Size is important

Uploading heavy background video can slow your site down and undermine the user experience. Ideally, you should reduce the resolution and bitrate until you reach a minimum level of satisfactory quality. A resolution of 720p or 480p with bitrate between 500 and 700kb / s may suffice and will considerably reduce the weight of the file.

✓ . Incompatible mobile devices / browsers

They do not play videos as background or do not support the video tag. It is interesting to include the poster attribute in the <video> tag, which will display a static image related to the video as background:

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