Adicionar áudio e vídeo à sua página da Web

Adicionar áudio e vídeo às suas páginas da Web é mais fácil usando HTML5. Com o suporte nativo a audio e video nos navegadores modernos, você poderá adicionar, modificar o estilo e programar elementos de mídia sem a necessidade de software adicional.

Nesta seção

TópicoDescrição

Adicionar um reprodutor de áudio à sua página da Web

Usando-se HTML5, é possível adicionar um reprodutor de música à página da Web sem que seja necessário um plug-in ou complemento de terceiros.

Como usar o HTML5 para reproduzir arquivos de vídeo em sua página da Web

Usando o vídeo HTML5, você pode adicionar e controlar o conteúdo do vídeo em suas páginas da Web, sem precisar de controles externos nem plug-ins.

Torne seus vídeos acessíveis com Faixas de Texto com Tempo

Complementando o elemento de vídeo do HTML5, a API de Faixa de Texto com Tempo fornece ferramentas para adicionar acessibilidade, transcrições traduzidas ou conteúdo estendido a seus vídeos.

 

Introdução

Tradicionalmente, a adição de mídia a uma página da Web envolvia a escolha de vários esquemas para adicionar som e vídeo. Boa parte desse suporte de mídia exige software adicional que precisa de atualizações frequentes, que às vezes são difíceis de programar e que podem ser limitados em relação à integração com sua página. O suporte nativo a áudio e vídeo em HTML5 pode facilitar a tarefa de adição de multimídia.

A especificação HTML5 descreve os elementos de áudio e vídeo com propriedades e métodos associados que podem ser usados como qualquer outro elemento da página. Com o aumento do suporte aos navegadores e o amadurecimento das especificações, podemos criar páginas com conteúdo mais atrativo. Por exemplo, ao usar vários elementos de áudio, sua página pode reproduzir uma música com vários instrumentos em faixas separadas de áudio.

Ao adicionar um elemento de vídeo à sua página, você pode exibir uma imagem de espaço reservado, definir o estilo do elemento usando Folhas de Estilos em Cascata (CSS), e escolher entre usar os controles nativos ou criar seus próprios controles. Com métodos, eventos e propriedades, você pode iniciar e parar a reprodução, buscar, alterar conteúdo ou alternar entre várias faixas de áudio.

Usando o elemento track, a legendagem codificada pode ser adicionada aos seus vídeos de forma tão fácil quanto criar e especificar um simples arquivo de texto. O elemento de vídeo cuida de toda a sincronização e exibição. Se quiser exibir as legendas você mesmo, também poderá fazê-lo a partir do script com APIs.

Ao trabalhar com os scripts de áudio e vídeo HTML5, você descobrirá que ambos compartilham muitos dos mesmos métodos e propriedades. Depois de aprender como gravar um evento que é acionado quando seu áudio inicia e para, você pode reutilizar esse código em seus scripts de vídeo.

Os links a seguir o ajudarão a se aprofundar no áudio e vídeo em HTML5 e começar a impressionar o público do seu site.

Inspire-se

Quando tiver dominado os conceitos básicos, confira estes artigos criativos que apresentam informações mais detalhadas sobre desempenho, práticas recomendadas e como fazer mais com o áudio e vídeo em HTML5.

Liberando o poder do áudio em HTML5 Começa com uma rápida visão geral sobre como adicionar e inicializar elementos de áudio em sua página. Em seguida, aprenda as diferentes formas de pré-carregar conteúdo e os efeitos no desempenho. A demonstração de como fazer looping de seu conteúdo de áudio e como sincronizar múltiplas faixas de áudio é feita com um exemplo de música de várias faixas. Finalmente, são apresentados sites reais que usam o elemento de áudio em HTML5 de formas criativas e inspiradoras.
Áudio nativo com HTML5Abrange a compatibilidade do elemento de áudio HTML5 e das APIs nos principais navegadores. Você também aprenderá como usar o suporte a múltiplos codecs, a definir tipos de MIME e como criar um fallback quando sua página carrega em um navegador que não fornece suporte para áudio HTML5.
Fazer seu vídeo em HTML5 ser reproduzido em dispositivos móveisMostra como colocar seu show na estrada. A discussão mostra tanto o vídeo HTML5 quanto outras alternativas, em relação à compatibilidade. O autor também aponta "pegadinhas" que às vezes podem afetar até programadores experientes.
HTML5 Video Caption MakerCrie facilmente arquivos de texto com tempo nos formatos WebVTT (Web Video Text Track) e TTML (Timed Text Markup Language) com esta ferramenta.

 

Veja o código em ação

Aqui estão demonstrações legais que mostram o que você pode fazer com áudio e vídeo HTML5. Use as ferramentas para desenvolvedores F12 e a guia de script para ver o código por trás das demonstrações. Para saber mais sobre as ferramentas F12, veja Como usar as ferramentas para desenvolvedores F12 para depurar suas páginas da Web

Legendagem de vídeo no IE10 Demonstra como adicionar legendas codificadas a seus vídeos HTML5 usando o elemento <track>.
IE BeatzUma demonstração divertida para bateristas e aspirantes que mostra como usar múltiplos elementos de áudio em camadas de som.
Reprodutor de Áudio HTML5 + Lista de Reprodução XML Esta demonstração combina o áudio HTML5 com o XML nativo para a lista de reprodução e os Elementos Gráficos Vetoriais Escaláveis (SVG) para os controles.

 

 

 

Mostrar:
© 2014 Microsoft