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.
Deixe seu comentário: