Desenvolvimento Web / HTML e HTML5

Criando o próprio player para reprodução de mídias com a tag video do HTML5

Padronize o comportamento do player em todos os navegadores e dê a aparência que seja coerente com a identidade visual da sua página

Por Gustavo Web

Publicado por Gustavo Web
em 12/10/2018 às 09h23

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Como você já sabe, cada navegador possui o seu próprio player e isso faz com que você não tenha um padrão e fique a mercê dos recursos disponibilizados de um dos browser's. Que tal desenvolver o seu próprio player e adicionar os recursos que são essenciais para controlar a mídia?

Salve salve moquerido, Gustavo Web aqui e hoje vamos ver como criar os componentes e interagir com tag video do HTML5.

Os diversos motores que a gente tem disponível para browser, cada um acaba oferecendo um recurso diferente ou até mesmo um visual diferente e você acaba entregando a experiência de acordo com o dispositivo.

A diferença entre eles são tão discrepantes que no caso do Google Chrome ele te dá a opção de efetuar o download da mídia diretamente pelo player.

Mas antes da gente partir para o código, uma análise que você deve fazer é porque utilizar o player navito do html e até mesmo porque hospedar essa mídia dentro do seu server. No geral, se você precisa de um vídeo o ideal seria isso estar no canal do youtube e simplesmente embedar isso na página.

Assim você tem inumeros benefícios... Estatísiticas, ganha assinantes no canal, consegue filtrar o público para uma possível campanha de marketing! Ah menos que seja algo muuuuito específico, ouso dizer que não seria viável colocar isso diretamente no seu servidor até por conta do consumo de disco, vai aumentar a leitura do disco constantemente e vai consumir bem mais banda (bandwidth).

Em todo caso, vamos ver como fu`nciona a personalização :)

Personalização

Basicamente consiste em desabilitar os controles originais do vídeo e adicionar os seus próprios controles. Então na verdade você não estará personalizando o existente, e sim criando as suas regras e personalizando de acordo com a necessidade.

Vamos trabalhar então com inputs do tipo range para fazer um slide do progresso do vídeo e controlar o volume e também com button para colocar a ação de play/pause, mudo e fullscreen :)

É claro que a formatação de tudo isso é feito com o CSS da maneira mais simples possível! Nenhuma tag desconhecida, nenhuma propriedade oculta... Tudo o que você já sabe decor!

Eventos

Vamos trabalhar com o jQuery para capturar os eventos e disparar as ações necessárias. Você pode imaginar que seja algo muito complexo, mas na verdade basta você encapsular o elemento com um seletor e depois atacar a propriedade ou a função.

Algo como:

var video = $('.video')[0]; // pega o primeiro objeto com a classe video e armazena na variável
video.play(); // disparar a ação do play

Autoplay

Esse tipo de recurso o browser não deixa rodar com qualquer vídeo. Uma solução rápida seria você trabalhar com iframe, mas nesse caso de vídeo local você vai acabar "sujando" seu código. Você pode acessar algumas configurações do Google Chrome para permitir que sejam reproduzidos os vídeos... Mas isso é claro que o visitante do site não vai fazer!

Mais uma vez isso reforça a ideia de trabalhar com o youtube ou vimeo para essa questão.

Material de Apoio

O link para acessar o nosso repositório e poder baixar o código pronto para que você possa estudar e consultar se necessário está logo abaixo.

Lembrando que eu deixei sem o vídeo porque ele é bem pesado... Mas você pode utilizar qualquer um com a extensão .mp4 que deve funcionar legal.

Clique aqui para acessar o repositório agora!

Feedback

Se ficar alguma dúvida, ou se você personalizar o player do seu site ou de algum cliente seu, me conta aqui abaixo nos comentários para ver essa tecnica aplicada num ambiente de produção.

Forte abraço.

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: