5

Estou desenvolvendo um site. Em cada header desse site vai ter um vídeo, seria o mesmo vídeo para todos os 'headers'. Utilizei a tag video do HTML5 mesmo ficou e assim:

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

Esse vídeo pesa 23 mega. no localhost já estou vendo que ele está travando bastante, imagina quando colocar isso na hospedagem. O que me recomendam fazer para que isso não influencie no carregamento da minha página? Já dei uma diminuída na qualidade para poder ficar com menor peso, por isso tem esse tamanho de 23 mega pois pesava mais antes.

2
  • 1
    Boa tarde, Kirito. Eu sempre faço o upload dos vídeos em algum site tipo: YouTube ou Vímeo e coloco como "embed content", ou seja, é apenas um link que é renderizado pelo próprio HTML5 para o vídeo que está em algum desses dois sites. A única coisa que vai influenciar aí é a velocidade de internet. Você não precisará se preocupar com storage... Isso atende sua demanda? Se sim, posso responder com um exemplo. 13/12/2017 às 16:40
  • 1
    Se eu entrasse em um site de uma agência de comunicação e de cara abrisse um vídeo, eu ia procurar outra agência. Minha esposa trabalhava na área e ela passaria mal só de ouvir a ideia. 13/12/2017 às 16:49

3 Respostas 3

4

Seguem 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/sader-poster.jpg"> 

Repare que eu coloquei muted="muted" para tirar o som. Mas se vc puder já tira o canal de som do vídeo antes de ripar. Já vai diminuir um pouco o arquivo.

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 vc pode diminuir ainda mais a qualidade do vídeo sem aparentar muito. No caso dessa imagem eu usei uma "tela" pixelada por cima do vídeo.

inserir a descrição da imagem aqui

Agora a opção que eu ainda não testei!

Fazer um srcset com videos diferentes para telas diferentes. Veja o código abaixo:

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

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

O tamanho do vídeo não deveria ser problema. O formato do vídeo sim.

Encontrei este artigo que discorre sobre isso. O mais importante é o seguinte:

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.”

Em pt-BR:

É daqui que vem toda esa coisa de streaming com MP4. Fato é, no começo de um vídeo MP4, todo o tamanho do container é definido. Assim não dá para fazer streaming com MP4. Para funcionar, se usa um truque: envie o vídeo sem quadros e concatene blocos de quadros de vários segundos. Isso é o que chamamos de MP4 fragmentado, ou streaming com MP4.

Isso não é streaming de verdade. É uma gambiarra que permite criar uma impressão de streaming. MP4 é um excelente formato para vídeos que serão baixados mas não presta para streaming. Então esqueça MP4 no contexto de streaming e HTML 5 e nunca mais fale de streaming com MP4.

O autor ainda sugere que se utilize outros formatos, como MPEG-DASH e HLS. Sugiro experimentar com esses formatos e ver o resultado.

2

Você pode colocar o seu vídeo para carregar após a página e todo o seu conteúdo forem carregados. Exemplo:

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

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .