1

Estou querendo implementar na página 404 um vídeo mp4 e peguei o vídeo desse site no tamanho 1920 x 1080 com 3.3 MB e 0:09 seg. Minha preocupação é se esse tamanho vai ficar muito lento. Essa é a primeira vez que crio esse tipo de página. Poderiam me ajudar? Preciso saber se o tamanho do vídeo está bom e se estou fazendo da forma correta. Segue abaixo o código:

<!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>
1
  • Qual o tempo de duração desse vídeo? 3MB realmente é pesado para esse tipo de aplicação.
    – Sam
    Commented 7/01/2018 às 22:59

2 Respostas 2

7

Listei abaixo algumas recomendações para se usar um vídeo como background. Espero que possa ajudar:

. Remova o áudio

Remova o áudio do vídeo. Recodifique o vídeo excluindo os canais de áudio, caso haja. É desagradável acessar um site com vídeo ao fundo e com áudio. Além disso, irá reduzir bastante o tamanho do arquivo.

. Vídeo curto

Vídeo como background serve mais para efeito visual da página do que para exibi-lo ao público. Portanto um vídeo de poucos segundos é o ideal, com um loop sem que haja delay entre o final e o reinício.

. O tamanho é importante

Carregar vídeo de fundo pesado pode deixar seu site lento e prejudicar a experiência do usuário. O ideal é ir reduzindo a resolução e o bitrate até que alcance um nível mínimo de qualidade satisfatória. Uma resolução de 720p ou 480p com bitrate entre 500 a 700kb/s pode ser suficiente e reduzirá consideravelmente o peso do arquivo.

. Dispositivos móveis/navegadores incompatíveis

Eles não rodam vídeos como background ou não suportam a tag video. É interessante incluir o atributo poster na tag <video>, que irá mostrar uma imagem estática relacionada ao vídeo como background:

<video autoplay loop class="bg_video" poster="imagem.jpg">
1
  • Obrigado a todos.
    – user24136
    Commented 8/01/2018 às 12:10
2

Minhas dicas,

Primeiro adicione um poster poster="1frame-do-video.jpg" na sua tag de <video> e coloque o atributo preload="auto". Assim enquanto o vídeo não carrega fica a imagem de fundo e não a tela em branco. Tipo assim.

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

Repare que eu coloquei muted="muted" para tirar o som. Mas se você puder já tira o canal de som do vídeo antes de ripar. Removendo ou diminuindo o Birate já vai diminuir um pouco o arquivo.

Aproveita e diminui os Frames do vídeo. Atualmente é comum ver vídeos em até 60fps, mas muitas vezes algo entre 20 e 24fps já são suficientes para termos uma boa percepção da fluides da cena.

Vou te falar de duas técnicas mais antigas, mas que pra vc as vezes pode ajudar. A primeira é deixar o vídeo em Preto e Branco, assim vc pode diminuir ainda mais a qualidade do vídeo sem prejudicar muito a resolução.

A outra técnica é quase uma gambiarra, mas é funciona colocando uma de overlay por cima do seu vídeo. Veja a imagem que vc vai entender. Com esse recurso tecnológico você pode diminuir ainda mais a qualidade do vídeo sem aparentar muito. Veja na imagem abaixo um exemplo:

inserir a descrição da imagem aqui

E por último vc pode tentar ripar o vídeo em outros formatos que são melhores para web.

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

Você deve fazer log-in para responder a esta pergunta.