No primeiro de seus blogs para PC Pro , desenvolvedor web Ian Devlin revela como incorporar vídeo em seu site com HTML5
em que linguagem é codificada a liga das lendas
Provavelmente, o maior e mais falado recurso do HTML5 é o vídeo integrado. Atualmente, o único método de adicionar conteúdo de vídeo ao seu site é com um plug-in de terceiros, como Flash, QuickTime ou RealPlayer. Com o surgimento do HTML5 e do elemento de vídeo, tudo isso mudará, com o suporte de vídeo sendo gerenciado pelo navegador da web, dispensando a necessidade de suporte de terceiros.
Vários navegadores da web já oferecem suporte para HTML5. Aqui, vamos revelar como você pode incorporar vídeo sem plug-in em seu site e os problemas que você enfrentará.
Tipos de arquivo e compatibilidade do navegador
Para começar, daremos uma olhada rápida nos diferentes tipos de arquivo de vídeo que são compatíveis com HTML5. Estes são Theora OGG e H.264 (.mp4). Navegadores diferentes suportam tipos diferentes e alguns não suportam nenhum. A tabela a seguir indica isso:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| Iphone | x | ✓ |
| Android | x | ✓ |
Codecs e outros problemas técnicos
O próprio HTML5 não especifica um codec de vídeo a ser usado, e isso levou a discussões sobre qual é o melhor para usar na web . Portanto, para cobrir todos os navegadores, temos que oferecer suporte a ambos os codecs.
E, claro, há o Internet Explorer. No momento, nenhuma das versões lançadas do Internet Explorer oferece suporte ao elemento de vídeo e um plug-in ainda é necessário para reproduzir o vídeo. Isso mudará com o lançamento do Internet Explorer 9 (provavelmente no início do próximo ano), quando o H.264 terá suporte, junto com muitos outros recursos do HTML5.
Caso você esteja se perguntando como, você pode converter seus arquivos de vídeo para OGG (você pode ler mais sobre o tipo Theora OGG no TheoraCookbook ) arquivos usando o Miro Video Converter .
Para obter mais informações detalhadas sobre o elemento de vídeo e codecs, vá para o mergulhe no html5: vídeo na web por Mark Pilgrim.
Código HTML5
Agora passamos para o código HTML5 real e como podemos fazer a coisa funcionar. O HTML5 nos fornece dois novos elementos que podemos usar para adicionar vídeo às nossas páginas da web: o elemento, que já mencionamos, e o elemento. Vejamos cada um deles separadamente.
O elemento
O elemento de vídeo pode ter os seguintes atributos:
| Atributo | Descrição |
|---|---|
| src | um URL válido para o próprio arquivo de vídeo |
| Reprodução automática | um booleano que indica se o vídeo deve ser reproduzido automaticamente |
| controles | um booleano indicando que os controles de mídia padrão devem ser exibidos pelo navegador |
| ciclo | um booleano que indica se o vídeo deve ser reproduzido repetidamente |
| pré-carga | indica ao navegador se o download preventivo do próprio vídeo é necessário ou se apenas os metadados são necessários. Os valores possíveis são:
|
| poster | o URL para um arquivo de imagem a ser exibido quando nenhum dado de vídeo estiver disponível |
| largura | a largura do vídeo, em pixels CSS |
| altura | a altura do vídeo, em pixels CSS |
A partir disso, pode-se ver como é fácil incorporar um vídeo OGG em seu site usando apenas o elemento de vídeo:
Isso é realmente tudo que há para fazer.
Qualquer navegador que ofereça suporte ao formato Theora OGG agora deve exibir e reproduzir seu vídeo com sucesso sem mais delongas. Claro que não é tão fácil assim, porque como vimos na tabela acima, o código só funcionaria no Firefox, Chrome e Opera. Portanto, precisamos ter um fallback para H.264 também. Isso pode ser feito usando elemento, que nos permite definir várias fontes de mídia para o elemento de vídeo.
em quais dispositivos você pode instalar o Kodi?
O elemento
O elemento de origem possui os seguintes atributos:
| Atributo | Descrição |
|---|---|
| src | um URL válido para o próprio arquivo de mídia (neste caso, vídeo) |
| modelo | o tipo de arquivo de mídia que deve ser um Tipo MIME , por exemplo. type='video/ogg' indica que é um vídeo Theora OGG, e você também pode fornecer o codec MIME para ajudar o navegador a decidir como reproduzir o vídeo usando type='video/ogg; codecs='theora, vorbis'. |
| metade | fornece o tipo de mídia pretendido do recurso de mídia e deve ser um consulta de mídia , por exemplo. media='handheld' indica que o vídeo é adequado para dispositivos portáteis ou media='all and (min-device-height:720px)' o que indica que o vídeo é apropriado para telas de 720 pixels ou mais. |
Observação: o elemento de origem é nulo e tem uma tag inicial, mas nenhuma tag final
A coisa mais útil sobre o elemento de origem é que podemos usá-lo para empilhar os diferentes tipos de arquivo, permitindo que o navegador tente um por vez até encontrar um que possa reproduzir.
Usando e juntos
Para empilhar vídeos nos diferentes tipos dentro do elemento de vídeo, inserimos o código da seguinte maneira:
Your browser does not support the video element.
O código acima agora funcionará em todos os navegadores, exceto no Internet Explorer, que exibirá a mensagem indicada acima.
Você pode testar isso visualizando a página de vídeo de teste HTML5, que contém um vídeo de amostra de uma borboleta nos formatos Theora OGG e MP4, portanto, se estiver visualizando no Firefox, Chrome, Safari, Opera ou no iPhone ou em um Aparelho Android, você deve ser capaz de visualizá-lo.
As facas afiadas entre vocês agora notarão que podemos tirar vantagem desse empilhamento e ter um fallback para o Flash (ou algum outro plugin) na parte inferior, em vez de exibir uma mensagem de desculpe você não pode ver esta mensagem de vídeo, usando o código a seguir :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Conclusão
Como acontece com a maioria dos elementos HTML5, o suporte do navegador para os elementos de origem e de vídeo é atualmente irregular. Também há um grande debate acontecendo no momento sobre se o elemento de origem eliminará o uso do Flash como o método mais popular de adicionar conteúdo de vídeo a sites. Não tenho certeza se isso vai matar o Flash completamente, mas, no entanto, acho que é justo dizer que ele veio para ficar e fornecerá aos desenvolvedores da web uma abordagem mais limpa e fácil para incorporar vídeo.
