Formatação da página base
Aula 2 - Exibindo Vídeo
Utilização da tag <video> e <source> para inclusão de vídeos
na página html.
Para ativar os controles de execução do vídeo devemos colocar o
atributo controls na tag <video>.
Podemos ainda utilizar o atributo autoplay. No meu browser
ele só funciona no primeiro carregamento da página e não quando
atualizamos.
Outros atributos muted inicia o vídeo no modo mudo, poster coloca uma imagem no lugar do vídeo antes do seu inicio e loop vídeo em ciclo contínuo.
Aula 4 - Play, Pause e Stop
Criar scripts em JS para execução das funções de vídeo play, pause e
stop. Utilizamos primeiramente o
document.getElementByID para selecionar o vídeo através da
id.
Para as funções play e pause utilizamos as funções do próprio JS.
Já para a função stop foram propostas duas opções: A primeira é
utilizando a função de pausa seguida do comando
currentTime = 0 que para o video e retorna para seu ponto
0s.
A segunda opção é utilizando a função load() que faz o
vídeo ser recarregado. Essa função pode ser inconveniente quando
utilizamos o autoplay, pois a cada recarregamento reinicia
a execução do vídeo.
Para resolvermos esse problema podemos seguir a função
load() pela função pause().
Criação de uma função em JS para leitura de um
<input> tipo range e conversão de seus valores
em decimais para ajuste do nível de volume do player com a função
.volume.
Foi utilizada a função parseFloat para converter a
string em numero com a função .toFixed(2) para
setar o número em duas casas decimais.
Utilizando o JS para implementar o atributo muted ao clicar
o botão. Nesse caso ao clicar no botão mute temos a verificação se o
atributo muted está na condição true ou false.
Para a Tela Cheia foi utilizado o elemento
.webkitEnterFullScreen(). Segundo o professor esse elemento
só foi testado no Chrome, portanto pode não funcionar em outros
navegadores.
Recuperando eventos de tela com as funções getVideo().onplay, getVideo().onpause, getVideo().onabort, getVideo().onvolumechange (tanto para volume quanto para mute). Podemos fazer monitoramento das ações do usuário com esses eventos.
Aula 8 - Obtendo ações do usuário
Nesta aula foram criadas uma série de instruções no JS para
monitorar e armazenar em memória as diversas ações do usuário com os
botões criados anteriormente.
As funções criam um registro de todas as ações do usuário,
armazenando o tipo de ação, o tempo do video em que ela ocorreu e o
volume que estave setado quando ocorreu.
Devo assistir novamente essa aula para entender melhor as rotinas
desenvolvidas.
Cria com JS uma tabela no documento mostrando as informações capturadas anteriormente. A tabela foi criada em JS de uma forma que já estudei mas que preciso me aprofundar.
Aula 10 - Formatando os dados
Formatando os valores de tempo com funções em JS e ajustando a captura de tempo no evento stop.
Aula 11 - Audio
Apresenta a tag <audio> e seus atributos (iguais aos da tag <video>)
Aula 12 - Eventos do áudio
Criação dos eventos de audio com JS.
Aula 13 - Youtube
Para utilizar um video do YouTube devemos pegar suas informações através da tag <iframe> no link de compartilhar do vídeo selecionado.
Aula 14 - Youtube parâmetros
Parâmetros para aplicar a videos do youtube incorporados: autoplay;
controls; modestbranding(oculta o logo do youtube); showinfo.
Precisamos verificar a documentação do Youtube para conhecer todos
os parametros e devemos utilizar o allow para habilitá-los.
Como criar uma playlist em um iframe do youtube. Podemos incluir
vários códigos dos vídeos no source do vídeo principal com os
atributos listType e playlist. A seleção destes
vídeos será em um ícone no topo da tela do vídeo.
Podemos também incluir uma playlist inteira do youtube copiando o
link no site do mesmo. Na aula foi utilizado outro método para
incorporar a lista, mas podemos copiar o código da lista diretamente
do youtube.
Criando através de script JS um sistema de busca de vídeos no youtube.