HTML5 Video e Audio | Reproduzindo Video e Audio de Forma Nativa | Série HTML5 | SW9

Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) ?

Sempre trazendo novos conteúdos para a minha audiência. ? Você está na trilha sobre HTML5.

#Quer acompanhar a Série sobre HTML5?

Se você gosta de aprender coisas novas, sempre antenado em tecnologia e tem interesse em conhecer um pouco mais sobre HTML5, não deixe de acompanhar a playlist que mantenho no meu canal do Youtube https://www.youtube.com/playlist?list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Dentro desta playlist você vai encontrar episódios sobre Drag&Drop, File API, Client Side Storage e muito mais.

#O que vimos no episódio anterior?

Ensinamos para que serve e como utilizar o atributo de dados customizados (data attribute). Você perdeu este conteúdo ?? Não se preocupe, segue o link para acessá-lo http://blog.sw9.com.br/2019/11/14/html5-data-attribute-utilizando-atributos-customizados-serie-html5-sw9

#O que você vai aprender hoje?

Você sabia que é possível reproduzir vídeo e áudio de forma nativa usando apenas os recursos disponíveis no HTML5? Neste episódio você vai ter contato com as novas tags video e audio que fazem parte da especificação HTML5. Vem comigo ?, que vou te mostrar, na prática, como usar estas novas tags e seus atributos.

#Introdução

Se você deseja incluir recurso multimídia em seu projeto Web, a boa notícia é que você consegue fazer isso de forma simples e rápida utilizando apenas HTML5. A partir de agora vamos dizer adeus ? aos plugins, players flash, componentes externos e usar os recursos nativos do HTML5 para reproduzir áudio e vídeo.

#O que vamos implementar?

No projeto de hoje, vamos criar uma página web para incluir dois cards usando o framework BootStrap. No primeiro card será exibido um player de vídeo e no segundo card um player de áudio. Ao longo da construção do projeto, você terá contato com as novas tags html que permitem a reprodução de mídia. Lembrando que o projeto ficará disponível na minha área de downloads para que vocês possam baixar e aprimorar os estudos. ?

#Reproduzindo Vídeo e Áudio

 Com apenas duas tags e a combinação de atributos é possível incluir reprodução de vídeo e áudio no seu projeto Web. Para reproduzir vídeo você deve usar a TAG VIDEO e para reprodução de áudio a TAG AUDIO.

As duas TAGS possuem o mesmo conjunto de atributos, exceto 3 deles que são exclusivos para reprodução de vídeo: poster, width e height

Os atributos comuns entre elas são: autoplay, autobuffer, controls, loop, preload e src. Vou abordar os principais no vídeo de hoje.

A forma mais simples possível de reproduzir áudio e vídeo é incluindo o atributo src como parte da TAG, porém neste formato teremos limitação se um determinado navegador não for compatível com o tipo de mídia.

Exemplo: Se o vídeo que queremos exibir está no formato mp4, porém o navegador utilizado pelo usuário não possui os codecs necessários para reprodução, o que fazer? Como contornar este problema? A forma mais correta é usar a TAG de AUDIO e VIDEO em combinação com a TAG SOURCE.

Trabalhando desta forma podemos incluir várias TAGS SOURCE com formatos de vídeo e áudio diferentes, assim quando o navegador identificar a primeira mídia compatível ele fará a reprodução.

? Então a primeira dica de hoje é: use as TAGS de VIDEO e AUDIO em combinação com a TAG SOURCE para aumentar a compatibilidade.

Para o nosso projeto, vamos usar 2 tipos de formatos de vídeo (wmv e mp4) e 2 tipos de formatos de áudio (wav e mp3). Para conversão dos tipos de mídia usamos a ferramenta Convertio (https://convertio.co/pt/)

#API de Áudio e Vídeo

Além das duas tags e seus respectivos atributos, também temos à disposição uma série de eventos disponíveis na API de áudio e vídeo. Vamos abordar os recursos desta API nos próximos episódios, para criar um player de vídeo + playlist usando HTML5 e Javascript. ?

#Compatibilidade

Vamos abordar o tema de compatibilidade entre os navegadores, como já venho fazendo em todos os episódios.

Usando novamente o serviço Can I Use é possível identificar uma compatibilidade de 97.7% no momento que eu estava preparando este conteúdo. Segue link para consultar a tabela de compatibilidade: https://caniuse.com/#search=video%20element

Levando em conta este índice de compatibilidade, você pode usar os recursos de transmissão de áudio e vídeo à vontade. ?

#Sobre Autoplay

Antes de partir para o vídeo, eu gostaria de compartilhar um pouco mais sobre o atributo autoplay. Em teoria, ao usar o atributo autoplay, a reprodução da mídia (áudio ou vídeo) deveria ser iniciada automaticamente. No entanto, devido a uma política adotada pelos navegadores, a reprodução automática não funciona conforme o esperado.

Eu sou plenamente a favor desta política, pois quem deve decidir se um vídeo ou áudio deve ser iniciado é o próprio usuário. Levando em consideração os navegadores Chrome e Firefox, quando uma página contendo recurso multimídia é carregada, deve aparecer ao lado do endereço do site uma opção solicitando autorização para reprodução automática. Cabe então ao usuário decidir se quer ou não ativar este recurso.

Agora se você quer realmente reproduzir um vídeo de forma automática (sem ação humana) existe uma solução de contorno. ?

Você deve combinar os atributos autoplay e muted dentro da TAG de VIDEO, para que a reprodução seja iniciada automaticamente. Mas atenção !!! Neste caso a reprodução será realizada sem áudio. Vou mostrar todos estes cenários durante a construção do nosso projeto.

#Hora de assistir ao vídeo

Chegou o momento de arregaçar as mangas e colocar a mão na massa. ?? ??‍♂️ ?‍♀️

[Conclusão]

No episódio de hoje [HTML5 Video e Audio | Reproduzindo Video e Audio de Forma Nativa | Série HTML5 | SW9], você aprendeu a usar as novas tags de video/audio e seus respectivos atributos para reproduzir conteúdo multimídia em seu projeto. ?

Está disponível na área de downloads o projeto que construímos hoje. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.

Dentro da minha área de Downloads, procure pela pasta /HTML5/MIDIAS. O resto é com vocês

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Post: http://blog.sw9.com.br/2019/11/27/html5-video-audio-forma-nativa-serie-html5-sw9

Link do vídeo: https://youtu.be/QvUeZ9pQwSU

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se