Práticas recomendadas do player de vídeo HTML5

Sejamos honestos: quando se trata de mídia e dos primeiros dias da Internet, definitivamente fizemos tudo errado. Começamos com reprodutores de vídeo incorporados, como o RealPlayer e o Windows Media Player, que exigiam codecs personalizados e plug-ins de navegador, depois passamos para o Flash e o Quicktime, que tornavam nossos navegadores lentos e, às vezes, até arriscados do ponto de vista da segurança. Levou mais de uma década para criar um <video> e realmente obter suporte do navegador para ela – uma espera muito longa, tanto que muitos sites ainda usam o Flash para exibir seus vídeos.

Dito isso, a maior parte da Web agora está usando <video> e o senhor pode perceber: menos travamentos do navegador, menos uso de memória e reprodução mais suave. Vamos dar uma olhada no básico e no mais avançado <video> bem como algumas dicas de práticas recomendadas. Aproveitaremos as vantagens do Player de vídeo HTML do Cloudinary ferramentas e O site do Cloudinary para obter ajuda ao longo do caminho também!

Básico <video> Utilização

Vamos dar uma olhada em um exemplo de <video> e acompanhar o que está acontecendo:

<video width="640" height="480" poster="sample-video.jpg" controls autoplay preload>
 <source src="https://davidwalsh.name/sample-video.webm" type="video/webm">
 <source src="sample-video.ogv" type="video/ogg">
 <source src="sample-video.mp4" type="video/mp4">
 <track src="subtitles-en.vtt" kind="subtitles" srclang="en" 
        label="English" default>
 <track src="subtitles-fr.vtt" kind="subtitles" srclang="fr"
        label="French">
</video>

A maioria <video> usará os seguintes atributos:

• width: A largura do <video> elemento
• height: A altura do <video> elemento
• poster: A imagem representativa do vídeo, exibida enquanto o vídeo é carregado
• controls: Se os controles nativos do navegador devem ou não ser mostrados (caso o senhor prefira criar os seus próprios controles)
• preload: Se o vídeo deve ou não ser pré-carregado
• autoplay: Se o vídeo deve ou não ser reproduzido automaticamente

Dentro do <video> o elemento será tipicamente:

• source: Elementos que fornecem a origem e o tipo de origem dos arquivos de vídeo, ordenados por preferência de suporte
• track: Legendas para o referido vídeo (opcional, é claro)

<video> Methods & Properties:

No lado do JavaScripts, temos alguns métodos para gerenciar o <video> :

• load: Recarrega o vídeo
• play: Reproduz o vídeo
• pause: Pausa o vídeo

E, embora existam muitos eventos e propriedades, esses são os mais usados:

• duration
• paused
• currentTime
• volume

Usando o Cloudinary para <video>

O Cloudinary oferece um upload completo para fornecer API para vídeos. Vamos começar fazendo o upload do vídeo com a API do Node.js:

cloudinary.uploader.upload('sample-video.mp4', function(result) {
  // Callback
  console.log('result: ', result);
}, {
  public_id: 'sample-video',
  resource_type: 'video'
});

Depois que o vídeo é carregado, o Cloudinary gera versões WEBM, MP4 e OGV do seu vídeo para otimizar a entrega, bem como uma imagem de pôster. Com o vídeo no servidor do Cloudinary, o senhor pode usar o seguinte para obter o HTML do vídeo:

cloudinary.video('sample-video');

/*
<video poster="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.jpg">
    <source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.webm" type="video/webm">
    <source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.mp4" type="video/mp4">
    <source src="http://res.cloudinary.com/david-wash-blog/video/upload/sample-video.ogv" type="video/ogg">
</video>
*/

O senhor pode usar um segundo argumento para personalizar o vídeo e o pôster:

cloudinary.video('sample-video', {
	width: 640,
	height: 480,
	autoplay: true,
	poster: {
		transformation: [
			{ width: 1850, crop: "scale" },
			{ overlay: "movie_curtain_overlay_new"},
			{ overlay: "text:Courier_80_bold:Once%20upon%20a%20time...", 
			gravity:"north", y: 60 },
			{ start_offset: 36 }
		]
	}
})

Cloudinary torna a implementação de um player de vídeo HTML5 muito fácil!

Práticas recomendadas e dicas

• Tenha cuidado com o autoplay uma página criada principalmente para um vídeo faz sentido, mas um anúncio ou um item da barra lateral? O senhor deixará os visitantes chateados rapidamente!
• Use um CDN – a velocidade de carregamento é importante!
• Ofereça tipos de arquivo de origem padrão (MP4) e de borda (WEBM) – o senhor recompensa os usuários que têm um cliente com recursos avançados de compactação e qualidade (WEBM), mas oferece um fallback para formatos amplamente suportados (MP4s).
• Se o senhor criar elementos de controle personalizados, certifique-se de torná-los grandes o suficiente para que sejam alvos de toque razoáveis para dispositivos móveis!

Os players de vídeo HTML5 começaram simples, mas se tornaram bastante avançados (pense no YouTube) e, como tudo é apenas HTML, CSS e JavaScript, qualquer desenvolvedor front-end pode criar um player de vídeo HTML5 impressionante. Provavelmente há muito mais pessoas que levaram o vídeo HTML5 ao limite, portanto, publique outras dicas ou exemplos de seu trabalho!