Curso de HTML5 - Elementos multimídia audio e video

o Olá pessoal aqui é o Fábio da voz não tem na mente e nesse vídeo Vamos estudar mais alguns elementos HTML muito interessante vamos falar hoje sobre os elementos áudio e vídeo é qual aquele L5 a gente consegue incorporar dentro de uma página Web arquivos de áudio e de vídeo por exemplo uma música um videozinho qualquer que tanto pode estar hospedados no seu servidor localmente Quanto pode estar em um outro local qualquer da internet referenciada por uma url e a mesma coisa para o arquivo de áudio e para este a gente fez esses dois elementos que eu citei o elemento o áudio e o elemento vídeo e o emprego deles é bastante simples não dá uma olhadinha primeiramente na sintaxe desses dois Element depois ver um exemplo prático primeiramente é muito áudio então ele é muito áudio essas empregado para colocar som um documento HTML como é que a gente utiliza o áudio é bem simples áudio src distância igual e o nome do arquivo de áudio Se for um artigo local basta colocar o nome do arquivo se for um arquivo que está em outro servidor em outro site por exemplo coloca url. de alguns atributos e depois a gente fecha o elemento eu abrir tem que ser fechado atributos nós temos todos vários atributos parcelamento pois aqui temos altos um atributo autoplay que inicia o áudio automaticamente assim que você carrega a página e que pessoalmente é um atributo que eu detesto Eu recomendo utilizar depois o atributo controls esse atributo muito importante porque o atributo que vai mostrar os controles do áudio para você dar o play para você navegar pelo áudio aumentar ou diminuir o volume por exemplo podem multi-loop faz com que o áudio seja repetido automaticamente quando ele finaliza mil Tec se ele for especificado áudio inicializa silenciado em Freud ensinou muito interessante também que usado para carregar quando o arquivo quando ele for grande e ele tem três valores possíveis nome o artigo não é para carregar que a mesma coisa que não usar o preload alto Ele carrega todo o áudio antes de começar a executar e metaleira que carrega apenas os metadados do aqui opositor informações sobre a duração do arquivo e finalmente o atributo src que eu oro pela tem muito obrigatório que é o endereço do áudio que vai ser incorporada no documento tanto local quanto remoto já o elemento o vídeo para ser empregado para gente colocar o conteúdo de vídeo em um documento HTML eu sentasse é basicamente Idêntica no do elemento áudio vídeo essa receita é o nome do arquivo ou o endereço daqui e os atributos do vídeo permite o vídeo tem vários atributos a maioria deles é igual aos atributos do é muito alto mas tem alguns diferentes então nós também temos volta ou Play temos controls temos o loop igualzinho áudio só que provide a gente também vai ter Wii e rite que vai ser ficar respectivamente a largura do vídeo e altura do vídeo em pixels temos também o pênalti eo src quê é URL do vídeo local remoto e além disso também podemos utilizar o atributo poster é para carregar uma imagem prévia do vídeo antes do carregamento o jogo mesmo carregamento com a imagem é que vai ser exibida então pôster em adição aos elementos áudio e vídeo também temos um outro elemento esse elemento interessante que elementos urso o ser se é utilizado para gente especificar vários arquivos de mídia de uma vez para disponibilizar o áudio ou vídeo até mesmo realmente os picture in formatos diferentes por exemplo navegador do usuário Pode não ter suporte a um formato de áudio específico como formato ao GG por exemplo da gente pode eventualmente ter esse arquivo de áudio em vários formatos e da alternativa para o navegador do usuário escolher qual formato ele vai executar para isso a gente a ver com elementos urso dentro do áudio ou do vídeo pro vídeo também sério então como é que funciona você abre o áudio ou vídeo e dentro dele você abre o sursis aí é nossos que você vai especificar o nome do arquivo você endereço e você também vai especificar o tipo de eu tipo de diário que multimídia e por exemplo áudio ou vídeo barra formato áudio MP3 por exemplo o áudio/GG o vídeo bairro MP4 e você tá esse isso uma vez para cada arquivo diferente que você tiver breja mesmo arquivo só que em formatos distintos aí quando o navegador do usuário carregar essa página ele vai escolher o formato mais adequado formato que ele consegue reproduzir então Ele mente só isso é interessante nesse sentido bom já vimos então a parte teórica vamos para a parte prática agora a gente vai abrir aqui um documento HTML eu tenho que me esqueleto pronto e eu vou colocar alguns arquivos multimídia aqui para gente fazer uns testes para a gente fazer uns testes eu tenho já numa pasta aqui no computador um arquivo de áudio e um arquivo de vídeo e eu vou trabalhar com esses dois arquivos no arquivo de áudio ou vinheta com tempo É triste a vinheta padrão aqui no canal da bola em treinamentos como é que a gente inclui esse aqui vou aqui e eu não vou colocar áudio eu abro o elemento áudio específico com src qual que é o áudio que eu quero colocar e o meu áudio ele tá numa pastinha que eu chamei de mídia/vinheta conta mp3 Esse aqui é o nome do arquivo se tiver direto na raiz na na mesma pasta do arquivo HTML não precisa colocar esse endereço da pasta antes já sabe disso e aqui não posso ter sido colocar as "beleza e vou pedir para exibir também os controles então a gente coloca aqui o atributo com shows e se eu quiser que ele Execute e nem interruptamente eu Posso acrescentar um elemento look por exemplo e fecha aqui e três que sim mas a gente pode ainda colocar aqui no meio do áudio nem entre a a tag que abre e fecha uma frase do tipo seu navegador não suporta ou elemento áudio o caso o navegador do usuário seja muito antigo ou seja um dispositivo não padrão que Não suportes elemento vai aparecer essa frase no lugar beleza vamos testar por bem eu vou salvar que minha página e agora vou carregar tá aqui não carregue a página multimídia titular um Olha só aparecer esse controle Zinho aqui esse controle é o meu elemento áudio veja que ele tem um botão de play Tem um reloginho aqui para mostrar o tempo da mídia a gente pode ficar aqui para adiantar ou voltar não tem também temos o controle de volume pode ser clicado para mudar ou não E aí clica no play e ele vai começar e a tocar música talvez vai para escutar aí ele mostra tem um minutinho 3D música também o alto volume eu posso ir aqui e ela achar um pouquinho também posso adiantar E aí olha só interessante vai chegar no final três E aí começa de novo sozinho porque começou porque eu te avisei o atributo no pi foi assim que a gente coloca um arquivo de áudio no documento HTML é bastante assim sabe esses controles aqui são simplórios mas dá para controlar isso aqui usando java script a gente vai ver depois nas aulas jovens formou aquele sentar controles mais avançados beleza para esta aqui um voltar para o código e agora eu quero a crescer tá é um vídeo aí eu vou acrescentar um vídeo também então eu vou pular um parágrafo aqui ó e vou acrescentar um dia como é que a gente acrescenta o vídeo o vídeo é bem parecido src igual é meu vídeo tá na mesma pasta/mídia é barra de mídia/e o meu vídeo aqui em particular se chama pisca leds o ponto MP4 bom pisca Alex. MP4 É um videozinho que eu tirei de um vídeo aqui do canal um vídeo diário do hino tirei um trechinho de limão tem esse vídeozinho no formato MP4 quer exibir os controles também quero que ele seja executado em sequência não quer Semp mas a que eu quero exibir o vídeo não controle no tamanho específico eu quero que ele tenha Weed igual a 1024 pixels e Raiz igual a um supor 560 pixels se você não colocar essa de mensagem aparece a dimensão normal do vídeo dimensão padrão dele e da mesma forma que a gente fez aqui com o áudio a gente também pode deixar uma frase minha Oi para o usuário saber se alguma coisa aconteceu se o navegador ele não tivesse suporte a esse elemento é Beleza agora eu vou carregar mesmo que ele fecha aqui eu posso eu tenho que deixar meu organizadinho assim salvo e vou carregar aí apareceu o vídeo aqui na tela não ele que o multimedia que ensinou o áudio e aqui tá o vídeo então clicando aqui no Play pessoal ele começa a tocar nosso projetinho legal aí eu posso abaixar o volume aqui dá para colocar em tela cheia e a gente pode avançar o vídeo ou retornar clicando aqui no controle dessa barra deslizante que mostra o andamento do vídeo e o relógio mostrando o tempo decorrido muito tranquilo esse aqui tá sem o look então quando chegar no final ele deve simplesmente parar 30 parou não retorna porque eu não coloquei a o loop beleza bem Tranquilo então esse controle e finalmente vou demonstrar o elemento surce quem não entende a diferença na verdade a execução Mas é interessante saber como utilizar dando lugar desse áudio aqui eu vou colocar um elemento sur se é para gente trabalhar com vários formatos essa vinheta na verdade esse arquivo vinheta MP3 Eu salvei em mais de um formato eu dizer o programa ao da série e salvei em outros formatos Então como é que eu carregaria esses formatos falei o seguinte a pagar em fazer do zero bom então eu passo assim áudio queres e dos controles só que agora eu fecho aqui e dentro que desse áudio eu vou colocar o elemento Surf e nos urso eu vou colocar o endereço do meu arquivo que é o Mídia/vinheta.

MP3 beleza e agora especifica o tipo dele tem um navegador mais facilmente mais rapidamente saber qual é o tipo da mídia eu gosto Type igual áudio/MP3 a esse nome áudio by MP3 é o nome Maine padrão não é qualquer coisa que você pode escrever aquilo sem consultar quais são os tipos padrão E aí eu fecho aqui e vou para o próximo é vamos fazer copiar isso aqui peraí mais rápido agora o segundo arquivo eu tenho ele no formato o Gegê Olha que legal então vai ser áudio/ou GG Oi e o terceiro e último eu tenho três versões é o vinheta. W a ver que é áudio/W a ver forma que eu preciso fazer posso ir deitar para ficar mais legal o código salvar e agora carregar a página de novo está aqui desde que apareceu aqui embaixo nem eu apaguei o o elemento de parágrafo e eles ficaram na mesma linha nós vai ganhar mento Mas é o mesmo Arquivo ele vai colocar tranquilamente agora o navegador tá escolhendo Qual o formato ele vai tocar o formato que ele tem suporte se ele não tivesse o corte vai trazer ele tenta colocar loja GG se não tiver outro jeito na tocar o w a vida mais fácil assim que o arquivo seja executado na máquina do seu usuário vezes a gente é isso aí pessoal no vídeo de hoje vimos Como utilizar os elementos áudio e vídeo Para incorporar multimídia dentro de uma página Web dentro de um documento HTML dá para fazer isso de ouro e também dá para gente mexer nesses controles por lado script que algo que a gente vai ver em um outro vídeo e como incorporar um vídeo no YouTube esse assunto para um outro like também frente pra usar um outro tipo de controle para isso espero que se não gostavam aproveite para se inscrever aqui no canal da Bola Entra na mente Se você não for inscrito ainda e se já for inscrito clique no Sininho aqui embaixo para ativar as notificações ser avisado Quando a gente tiver com todo mundo postado aqui no canal e se você quiser contribuir com a Bóson treinamentos torne-se membro do nosso clube de canais aqui embaixo na descrição do vídeo tem um link para você clicar e ler como é que faz para se tornar membro do clube canais a vossa ou simplesmente clique no botão seja membro aqui no YouTube e não deixa acessar nosso webside www. bolaobrisanet.

com.