Reprodução de multimídia em HTML5

Quando trabalhamos na web devemos garantir que cada usuário tenha uma experiência satisfatória em nossa página, muitas vezes isso implica ter que fazer códigos adicionais ou menos eficientes, tudo para que nossa página não falhe.
Com o novo padrão HTML temos os novos elementos multimídia, como áudio e vídeo, já que ambos têm uma origem comum, podemos avaliar seus formatos e assim saber se o navegador pode ou não reproduzir os arquivos especificados.
Método CanPlayType
O método canPlayType Permite-nos saber ou ter noção se o navegador pode ou não reproduzir o ficheiro multimédia que estamos a indicar.
Usando este método, podemos ter 3 tipos de resposta:

• “” vazio isso nos diz que você não pode reproduzir o arquivo no formato especificado.
• pode ser esta resposta nos diz que o formato pode ser reproduzido.
• provavelmente Com esta resposta, o navegador nos informa que existem grandes probabilidades de que ele possa reproduzir o conteúdo no formato especificado.

Vejamos abaixo um código onde usamos este método em um arquivo multimídia:

 Vídeo de exemplo não pode ser exibido 
 
Propriedade
Valor

 

 

Aqui, simplesmente o que fazemos é executar duas matrizes, no primeiro colocamos os nomes dos arquivos com extensões diferentes, no segundo colocamos os formatos que temos, uma vez com isso percorremos o array de formatos e depois estamos avaliando com o método canPlaytype para obter a resposta de que precisamos.
Até agora tudo está indo bem, assim que tivermos a avaliação perguntamos quem retornou a resposta provavelmente e esse é o que colocaremos para reprodução.
Vamos ver como fica no navegador:

Neste exemplo específico, usamos Raposa de fogo, neste caso, o formato que o navegador pode reproduzir é o webm e é efetivamente aquele mostrado no elemento correspondente.
Como podemos ver, este método nos permite estabelecer várias opções e se desenvolvermos nosso algoritmo corretamente, podemos realizar uma funcionalidade muito robusta que nos permitirá desfrutar dos benefícios de HTML5 no gerenciamento de multimídia em vários navegadores sem ter que se preocupar com a experiência do usuário.
Com isso finalizamos nosso tutorial, agora sabendo como avaliar os diferentes formatos de multimídia e como os navegadores podem tratar cada um.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo