Nesta lição, você aprenderá como adicionar um vídeo HTML5 a uma página no Adobe Dreamweaver. Agora, antes de começarmos temos que configurar um site para este módulo. E então vamos para o menu do nosso site, para o novo site. Vamos clicar neste ícone de pasta aqui. Agora eu já coloquei a pasta de mídia do módulo seis da pasta de arquivos de aula na minha área de trabalho para que seja mais fácil para mim usar. Então você vai navegar para fora para onde quer que você tenha essa pasta. E vamos clicar no botão selecionar pasta. Vou nomear isso, módulo seis mídia, e vamos clicar no botão salvar. Agora, se você nunca criou um site ou se quiser mais informações sobre por que usamos sites em geral, você pode voltar para o módulo um para gerenciar sites no Dreamweaver e saiba um pouco mais sobre como trabalhar com sites. Do nosso painel de arquivos aqui à direita, vamos abrir a caminhada em destaque. Agora nesta página, temos nossa caminhada em destaque e é Danforth Falls e eles têm uma área de cachoeira realmente grande. Então, o que queremos fazer é não apenas colocar uma foto aqui mas queremos colocar um vídeo aqui. Então o que vamos fazer é ter certeza que estamos na visualização de design e aqui à direita, vamos clicar onde temos o nosso lado e para ter certeza de que você está no lugar correto, olhe para baixo aqui em nossa barra de status ao longo da parte inferior. E você pode ver, ele dirá um artigo lateral e direito. E se você ver isso, você sabe que está no lugar certo. Com HTML no passado, costumávamos ter que pular obstáculos para colocar um vídeo na página. Mas agora com HTML5, é muito fácil. Então vamos passar para o painel de inserção aqui à direita. Vamos escolher HTML no menu suspenso na parte superior do painel. E nós vamos rolar para baixo na parte inferior do vídeo HTML5. E vamos clicar sobre isso. Isso é apenas o primeiro passo, que coloca um espaço reservado lá. Mas aqui em nosso painel de propriedades, é aqui que temos todas as informações de que precisamos para que este vídeo realmente funcione. Então vamos para o painel de arquivos, clique de volta nesse painel de arquivos. E a primeira, provavelmente mais importante característica neste painel de propriedades é a fonte. Então essa é a coisa mais importante que precisamos fazer. Então, vamos ao nosso menu de mídia em nossos arquivos. Nós vamos abrir isso porque vamos usar este arquivo 0.2, este pequeno ícone de alvo, logo à direita da fonte. E vamos clicar nele e arrastá-lo para nossa cachoeira. Agora, porque temos um espaço reservado aqui, esse espaço reservado é bem pequeno. E se deixarmos assim, esse é o tamanho do nosso vídeo, o que é meio pequeno. Então vamos descer até a largura e vamos colocar uma largura de 300 e uma altura de 500. E é aqui que nosso vídeo estará. Quando você tem um vídeo na página se deixássemos assim, quando nossa página fosse carregada, todos os nossos espectadores veriam seria uma caixa preta. Então, logo abaixo da fonte, temos a capacidade de usar o que é chamado de pôster. E um pôster é apenas uma imagem do que você poderá ver quando o vídeo começar a ser reproduzido. Então, vamos voltar ao nosso painel de arquivos. E desta vez vamos abrir nossa pasta de imagens. Nós vamos rolar para baixo e para o nosso pôster vamos usar esse mesmo ponto para arquivo. Vamos clicar nesse ícone. Vamos arrastá-lo para cachoeira.PNG. Então esta é uma fotografia daquela cachoeira. Nós queremos ter algum texto de fallback. Caso alguém não consiga ver qual é o nosso vídeo, podemos digitar um vídeo das quedas em Danforth Falls durante a primavera, depois de uma chuva. Então a água está furiosa. Abaixo, no canto inferior esquerdo, temos algumas opções diferentes. A primeira é que temos controles, então podemos escolher se nossos espectadores podem pausar ou não ou reproduzir ou mesmo reproduzir esse vídeo. Então vamos deixar os controles ligados. Você também tem a capacidade de escolher a reprodução automática. Assim que a página carregar, o vídeo será reproduzido. Agora, aqui está a coisa sobre isso. Se você quiser que esse recurso realmente funcione em um navegador, alguns dos navegadores modernos não gosto desse recurso de reprodução automática mas uma das maneiras de contornar isso é clicar neste botão silenciado. Agora, tudo o que fizemos, muito da visualização que fizemos de páginas foi através de nossa visualização ao vivo. E se formos para nossa visualização ao vivo, podemos vê-lo pensando um pouco mas este não é o melhor lugar para visualizar seu vídeo. Então vamos para o menu de arquivo para salvar, e eu vou sair para o meu navegador e eu vou fazer um controle O, estou em um PC. Se você estiver em um Mac, você vai fazer um comando O, e isso nos permitirá abrir um arquivo. E devemos navegar para fora para onde quer que tenhamos essa pasta de mídia do módulo seis. E vamos clicar duas vezes naquela caminhada em destaque para abri-lo. Então você pode ver que nosso vídeo começou e nosso vídeo está sendo reproduzido. Mas uma das coisas que fazer com que ele seja reproduzido automaticamente meio que tira é o som das cataratas. Então nosso espectador teria que saber, em primeiro lugar, que há som. E em segundo lugar, eles precisariam saber que eles podem ligar esse som novamente e, em seguida, clique no botão play. Então você pode ouvir esse som. Vou voltar ao Dreamweaver. Então você tem que decidir se quer ou não você deseja que seu vídeo seja reproduzido, seja ou não você quer que ele seja reproduzido automaticamente logo no início. Se você fizer isso, você precisa de som nele ou está tudo bem que é mudo? E você vai dar aos seus usuários o controle mais de jogar e pausar esse vídeo? Então, nesta lição, você aprendeu como adicionar um vídeo HTML5 para uma página no Adobe Dreamweaver.
