Oi, nesta palestra vamos falar sobre multimídia.
Isso inclui vídeo e áudio em seu site.
Agora vídeo e áudio são dois dos
elementos mais populares e dois mais odiados da web.
Designers adoram porque eles podem colocar seus vídeos legais e
talvez algumas músicas caseiras on-line e compartilhar com todos.
As pessoas que acessam seu site às vezes odeiam porque sentem que
não têm controle sobre o que estão vendo.
Então, o que vamos falar hoje é sobre os elementos de áudio e vídeo HTML5.
Vamos explicar brevemente o propósito dos plugins.
E, finalmente, vamos refletir sobre as questões de acessibilidade
que vêm de mãos dadas com o uso desses tipos de tags multimídia.
Então, antes do HTML5 não havia realmente quaisquer usos consistentes de multimídia
que estavam sendo mantidos em todos os navegadores.
Assim, o novo HTML5 é projetado para evitar o uso de ter que usar plugins ou
software extra que você ainda não tem em sua máquina.
Deveria ser “plug and play”.
Se você vai colocar um vídeo, as pessoas devem ser capazes de vê-lo sem
ter que baixar Quicktime ou Flash, ou qualquer coisa ao longo dessa linha.
Agora ainda não é uma tag totalmente implementada.
Mas está se movendo muito rapidamente nessa direção.
Então vamos começar com o elemento de vídeo.
Portanto, a tag de vídeo usa um atributo de origem que é muito semelhante
ao atributo de imagem.
Diga ao navegador onde está o arquivo.
Você também pode usar o que chamamos de tags incorporadas,
onde você pode ter a tag de vídeo e, em seguida, várias fontes abaixo.
Há uma série de atributos que são usados muito amplamente.
Os dois primeiros, altura e largura, são bastante auto-explicativos.
Qual o tamanho que você gostaria que seu vídeo aparecesse no navegador?
A reprodução automática determina se o vídeo deve ou não iniciar assim que você carregar a página.
Loop permitirá que o vídeo seja reproduzido uma e outra vez.
E o último, controles, é algo que você pode adicionar para dar à pessoa mais
controle sobre quando parar e iniciar o vídeo.
Se você usar uma tag de vídeo, geralmente é uma boa idéia colocar algum
texto lá junto com os diferentes atributos.
Dessa forma, se o navegador por algum motivo não suporta a tag ou
não consegue reproduzir o vídeo, você recebe uma espécie de dica útil para o usuário informando que
deve haver um vídeo aqui que você estaria olhando.
O elemento de áudio é muito semelhante ao vídeo e,
novamente, usamos um atributo de origem para vincular ao arquivo.
Normalmente, você usará um arquivo.mp3 ou .wav.
Os atributos novamente, muito semelhantes.
Você tem reprodução automática, controles e loop, mas também temos buffer, silenciado e volume.
E esses são os atributos extras que você pode colocar onde você vai controlar
o que a pessoa está ouvindo e quão alto.
Além disso, quando você estiver usando áudio, você pode definir clipes onde você pode entrar e
dizer, Eu quero que o vídeo comece nesse momento específico.
Então, meu primeiro exemplo, eu quero que ele só toque a música de 5 a 25 segundos.
No próximo, você começa do início e
você só vai jogar os primeiros 39 segundos.
Novamente, você pode continuar e continuar.
Eu quero começar em um minuto 38 segundos, e apenas ir em frente e jogar para 45.
Ou no final você pode apenas dizer, hey, começar no segundo 42 e jogar a partir daí.
Então, mostrar o código para vídeo e
áudio HTML é praticamente a antítese do que se trata.
É suposto ser sobre olhar para as coisas e ouvir coisas.
Então vamos em frente e olhar para algum código agora que está realmente funcionando.
Você pode ver que eu tenho o src como apenas o meu filme BoxCar, e
eu defini a largura padrão para 40.
Então, eu vou até aqui para Sublime e abrir isso no navegador.
Aí está, e não é muito excitante.
A menos que você tenha olhos super rápidos e seu navegador é incrivelmente rápido, você
perdeu completamente o fato de que ele carregou este vídeo e jogado todo o caminho através.
Então vamos em frente e tentar de novo.
Na verdade, ele só carregou e não fez nada.
Vamos adicionar reprodução automática.
Tudo bem, guarde.
Eu vou até aqui e recarregar, e agora você pode ver
adicionando o atributo de reprodução automática, ele mostrará automaticamente o vídeo.
Agora isso é algo que você não quer fazer a menos que você tenha certeza de
que o espectador quer vê-lo.
Houve um grande alvoroço recentemente quando um site
de mídia social começou a fazer todos os vídeos autoplay.
Então, se você continuasse, de repente todos esses vídeos estavam sendo reproduzidos.
E estava consumindo uma grande quantidade de largura de banda para as pessoas, certo?
Então, em vez de apenas fazer reprodução automática, vamos em frente e colocar em controles.
Ao fazer isso,
você pode ver que agora adicionamos um pequeno painel de controle à parte inferior do vídeo.
As pessoas agora podem iniciar o vídeo, parar o vídeo e rebobiná-lo.
Esta é realmente a maneira que você meio que quer pensar sobre
como você pode melhorar a experiência para o usuário.
É possível colocar vários atributos
nisso e tipo de colocá-los em cima um do outro.
Se fizermos isso agora, você terá que experimentar meu
filho de cinco anos voando pela estrada várias vezes várias vezes.
Novamente, você realmente gostaria de evitar o uso de loop e também evitar o uso de auto-play, a
menos que você esteja dando às pessoas a oportunidade de usar os controles também,
certo?
Uma última coisa que eu quero falar aqui é que você pode notar com controles e
loop, estes são atributos que não parecem estar tomando quaisquer valores.
Então src =, largura =.
Quando você coloca esses atributos booleanos,
é a mesma coisa que dizer controles é igual a verdadeiro.
Loop é igual a verdadeiro.
Então foi assim que passamos com o nosso vídeo.
Vamos dar uma olhada no áudio por um segundo.
Torne isso um pouco maior aqui.
O que eu tenho aqui é que eu só tenho um link para a mesma música duas vezes.
Na minha primeira versão, você pode ver que eu tenho a pequena barra de áudio,
porque eu me certifiquei de usar controles.
E se eu tocasse, vai continuar e tocar toda a música.
No entanto, na minha segunda opção, você pode ver que eu adicionei, bem aqui, o t = 15:35.
Eu preparei para você para
que você possa realmente ouvir a música de quando a parte excitante realmente começa.
Então, estes são apenas alguns exemplos simples de como você usaria as tags para mostrar seu
áudio de vídeo.
E eu realmente espero que, enquanto você está codificando, você certifique-se de digitar as coisas junto, e
mexer com as coisas, e brincar com as coisas para realmente ter uma idéia de como esses vídeos e
todas as diferentes tags HTML5 estão funcionando.
Então, uma das coisas que eu falo com as pessoas sobre, que têm sido codificando em
outras versões do HTML e realmente não querem fazer a mudança para HTML5.
Que há tantas razões que você quer fazer esta rápida troca simples.
E plugins são um excelente exemplo.
Desde antes do HTML5, não havia padrão, plugsins eram necessários.
Então, o que queremos fazer é ir em frente e
mesmo que não seja suportado no momento, vá em frente e use essa tag,
entendendo que alguns navegadores ainda exigem Flash para reproduzi-los.
Finalmente, vamos falar sobre questões de acessibilidade.
Quando você vai usar vídeo ou áudio, assim como qualquer tipo de
conteúdo não contextual, você quer ter certeza de fornecer qualquer tipo de descrições de texto e
legendas ocultas ou outro conteúdo equivalente.
Você quer se certificar de que você também fornece links para plugins.
Caso contrário, você fica com algum tipo
de ícone quebrado em branco que as pessoas nem sempre entendem.
E finalmente, a coisa mais importante que eu gostaria que você tirasse desta palestra,
além de poder usar o código,
é que multimídia deve realmente melhorar seu conteúdo.
Você não quer que seja uma distração.
Você não quer que as pessoas gastem tempo tentando descobrir como desativá-lo para
que eles possam, a fim de realmente chegar ao conteúdo da sua página.
Obrigado.