Índice
Em HTML5 elementos de vídeo e áudio têm muitos fatores em comum, portanto, o objeto HTMLMediaElement define as características básicas de cada um na SOL.Os elementos de áudio são representados pelo objeto HTMLAudioElement, este objeto não representa nenhum aumento nas funcionalidades do HTMLMediaElement, do outro lado temos o objeto HTMLVideoElement representando os elementos de vídeo e o oposto do objeto HTMLAudioElement isso se supõe algumas características adicionais no HTMLMediaElement.
O elemento de áudio
O elemento Áudio nos permite incorporar conteúdo de áudio em nossos documentos HTML, é novo em HTML5 e pode conter os seguintes atributos: autoplay, pré-carga, controles, loop, mudo, src.
Vamos ver um exemplo de código de como incluir um elemento de áudio em nossos documentos:
Exemplo de conteúdo de áudio não pode ser reproduzido
Notamos que temos um rótulo, onde definimos o atributo controles para que possamos ter os botões que nos permitem manipular a reprodução do arquivo, com src indicamos o caminho para o arquivo de áudio e finalmente Reprodução automática, estar presente indica que o arquivo deve ser reproduzido quando o documento for carregado.
Como podemos ver, é algo bastante simples de manusear, vamos ver na imagem a seguir como ficaria em nosso navegador:
Como mencionamos no início, com o objeto HTMLMediaElement agrupamos as características comuns de áudio e vídeo e, no caso do vídeo, algumas características adicionais foram aumentadas.
As informações que podemos obter com este objeto são as seguintes:
- Reprodução automática Nos informa se a reprodução automática do arquivo está habilitada ou não.
- canPlayType() nos informa se o navegador é capaz de reproduzir o arquivo indicado.
- currentSrc permite que você saiba a fonte atual do arquivo.
- controles nos permite saber ou estabelecer a presença ou não dos controles de reprodução no arquivo.
- defaultMuted indica ou define se o arquivo deve começar com o volume completamente silencioso.
- ciclo indica ou define se o arquivo deve ser repetido.
- mudo abaixe o volume do arquivo
- pré-carga indica ou define o arquivo a ser carregado antes de reproduzi-lo, quando a página for carregada.
- src indica ou define o caminho para o arquivo de mídia.
- volume define ou indica o volume de reprodução do arquivo.
- altura indica ou define a altura.
- poster indica ou define o valor do atributo poster com o qual podemos colocar uma imagem de capa para o vídeo
- videoHeight indica ou define a altura do vídeo.
- videoWidth indica ou define a largura do vídeo
- largura indica ou define a largura.
Vídeo de exemplo não pode ser exibido
| Propriedade | Valor |
|---|
Para terminar este tutorial, vamos ver o que o navegador nos mostra com este código:
PROLONGAR
