HTML Preciso que meu vídeo carregue somente a capa.

Josiel Viega · 7 de julho de 2022

Fiz um slide de vídeos que direciona para outra pagina onde o vídeo poderá ser reproduzido, porém o slide está demorando muito para carregar por ser vídeo. Teria algum atributo para carregar somente a capa do vídeo como se fosse uma imagem, já que o vídeo não é reproduzido no slide? Já utilizei o preload="none", mas não carrega nada do vídeo, ficando somente o quadro vazio.

DiF · 7 de julho de 2022

@Josiel Viega Já tentou atribuir uma capa ao vídeo?

Exemplo:

<vídeo poster="img/capa.png" width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="vídeo/mp4">
  <source src="movie.ogg" type="vídeo/ogg">
Your browser does not support the vídeo tag.
</vídeo>

No caso, o atributo poster, insere uma capa no vídeo a partir de uma imagem, ela pode ser carregada no slider.

Caso, não funcione, você pode inserir uma imagem, e fazer o link desta imagem redirecionar para o vídeo em si.

Josiel Viega · 8 de julho de 2022

Boa tarde, já pensei nessa possibilidade, mas iria precisar separar o vídeo em imagens para poder usar uma com capa. Problema que não faço ideia de como fazer isso! Utilizo as linguagens php e javascript. OBS: Já encontrei alguns sites que fazem isso, converte um vídeo em varias imagens, mas não sei se é possível fazer isso com php ou javascript.

DiF · 8 de julho de 2022

@Josiel Viega Sim , é possível fazer isso com javascript. E também com php...

Veja um exemplo com javascript:

<div>
<vídeo id="meu-vídeo" autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/vídeo/sintel_trailer-480.mp4" type="vídeo/mp4">
</vídeo>
<button id="snap" onclick="print()">Criar capa do vídeo</button>
</div>


<canvas id="canvas" width="640" height="480"></canvas>

Javascript:

     let vídeo = document.querySelector('vídeo');
     let canvas = document.querySelector('canvas');
     let context = canvas.getContext('2d');
     let w, h, ratio;
     
     //Adciona o loadedmetadata que irá ajudar a identificar os atributos de vídeo
     vídeo.addEventListener('loadedmetadata', function() {
       ratio = vídeo.videoWidth / vídeo.videoHeight;
       w = vídeo.videoWidth - 100;
       h = parseInt(w / ratio, 10);
       canvas.width = w;
       canvas.height = h;
     }, false);
     
     ///define a função para tirar o print
     function print() {
       context.fillRect(0, 0, w, h);
       context.drawImage(vídeo, 0, 0, w, h);
     }

Veja funcionando aqui: https://jsfiddle.net/dife/kewczobx/

4 horas atrás, Josiel Viega disse:

mas iria precisar separar o vídeo em imagens para poder usar uma com capa.

Não necessariamente você precisa separar o próprio vídeo em imagens. Você pode criar sua própria imagem com um paint brush, gimp ou photoshop... Mas claro, usar uma imagem do próprio vídeo, é mais rápido. No caso, você pode usar o exemplo dali de cima, para implenentar uma maneira de ao gerar a capa, você possa forçar o download da imagem criada, ao invés de só mostrar em tela como eu fiz ali.

Se usar o php, você pode combinar com o ajax em javascript, para que ao criar a capa, automaticamente faça um upload dessa imagem para uma pasta no servidor e incluir dentro do elemento de slide.

Exemplo com php:

Primeiro você precisa usar o PHP-FFMpeg.

Então usar um código parecido com isso:

<?php
//faz o autoload do arquivo necessário
require 'vendor/autoload.php';

$sec = 10;

//seu vídeo
$movie = 'test.mp4';

//capa
$thumbnail = 'thumbnail.png';

$ffmpeg = FFMpeg\FFMpeg::create();
$vídeo = $ffmpeg->open($movie);
$frame = $vídeo->frame(FFMpeg\Coordinate\TimeCode::fromSeconds($sec));
$frame->save($thumbnail);

//mostra o print em um elemento img 
echo '<img src="'.$thumbnail.'">';