Lynda.com Projete o vídeo de plano de fundo em HTML da Web

• Pode 10, 2024

O vídeo de plano de fundo é uma ótima maneira de comercializar seu produto e, neste curso de treinamento em vídeo do Lynda.com, intitulado Projetar a Web: Vídeo em segundo plano HTML com Chris Converse, você aprenderá como adicionar um vídeo de fundo de reprodução automática à sua página da web. Você também aprenderá como usar CSS para colocar outros elementos de design sobre o vídeo em segundo plano. E os arquivos de exercícios são gratuitos até para a associação Standard.

O Converse começa com um arquivo html básico e cria o contêiner div principal para os elementos de design: o slogan do texto, o logotipo svg e o vídeo. Ele demonstra como usar a reprodução automática na tag de vídeo e como configurar os dois tipos mais comuns de vídeo, .mp4 e .ogg.

Em seguida, o Converse passa para os arquivos CSS e o CSS para estilizar e posicionar o vídeo e a imagem do logotipo centralizada. Ele passa a fazer o mesmo com o texto do slogan. Gostei especialmente da técnica dele para trabalhar com bordas.

O Converse discute como tornar esse layout responsivo usando consultas de mídia para telas médias e pequenas e CSS. Mais uma vez, ele define estilos para o vídeo, o logotipo e o slogan. Ele também demonstra como definir uma imagem de substituição para telas pequenas que não podem reproduzir um vídeo e ocultar o vídeo.

Passando para questões mais complexas, o Converse demonstra como usar o JavaScript para adicionar um controle mais complexo sobre a exibição de recursos de dispositivos móveis, como eventos de toque. Ele apresenta um site de terceiros chamado Modernizr que irá gerar classes CSS que podem ser adicionadas à página via JavaScript com base nos recursos do dispositivo atual. Ele demonstra como gerar o código, fazer o download e adicioná-lo ao código da sua página da web.

Na última lição, o Converse demonstra como codificar a posição e outros estilos para o layout, para que o vídeo cubra toda a janela do navegador.

Este curso foi sobre o HTML e o CSS usados ​​para criar e posicionar um vídeo de plano de fundo para dispositivos da Web e dispositivos móveis. No entanto, eu esperava que o autor discutisse opções para hospedar e otimizar o arquivo de vídeo para um download rápido. Além disso, seria bom saber como adicionar elementos de design interativos sobre o vídeo em segundo plano, em vez de apenas elementos estáticos.

Chris Converse é formado em design gráfico pelo Rochester Institute of Technology e 22 anos de experiência em design e tecnologia.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Divulgação: não fui compensado financeiramente por este artigo. As opiniões são completamente minhas com base na minha experiência.

Instruções De Vídeo: Premiere Pro tutorial: Creating MPEG-4 files for the web | lynda.com (Pode 2024).