Como adicionar vídeo de fundo com Adobe Muse

O que saber

• Com o Casa página em Plano ver, vá para Janela > Biblioteca > [MR] Vídeo de fundo em tela cheia pasta e arraste o widget para a página.
• Para adicionar um vídeo, vá para Arquivo > Adicionar arquivos para upload > pasta de vídeos> Abrir.

O Adobe Muse permite criar páginas da web usando um fluxo de trabalho semelhante para publicações; você não precisa de um conhecimento profundo do código que constrói um site ou página, embora a familiaridade com HTML5, CSS e JavaScript não prejudique. Embora o vídeo tradicional da web geralmente seja adicionado por meio da API de vídeo HTML5, o Adobe Muse realiza a mesma coisa por meio de widgets que criam o HTML 5 necessário para tarefas específicas, mas usam uma interface de linguagem simples no Muse para escrever o código quando a página é publicada.

Como preparar uma página para vídeo de fundo no Adobe Muse CC

Com o widget instalado, agora você pode criar a página que usará o vídeo.

1. Antes de começar, crie uma pasta para o seu site Muse. Dentro dessa pasta, crie outra pasta – usamos “meios de comunicação”- e mova suas versões mp4 e webm do vídeo para essa pasta.

2. Ao iniciar o Muse, selecione Arquivo > Novo site.

3. Quando a caixa de diálogo Layout abrir, selecione Área de Trabalho Enquanto o Layout Inicial e mude o Largura da página e Altura da página valores para 1200 e 900. Clique OK.

4. Duplo click Pagina principal na visualização Plano para abrir a página Mestre. Quando a página mestra abrir, mova as guias de cabeçalho e rodapé para a parte superior e inferior da página. Você realmente não precisa de um cabeçalho e rodapé para este exemplo.

Como usar o widget de vídeo de fundo em tela cheia no Adobe Muse CC

Usar o widget é muito simples.

1. A primeira coisa que você precisa fazer é retornar à Visualização do Plano selecionando Visualizar > Modo Plano.

2. Quando a Visão do Plano abrir, clique duas vezes no Pagina inicial para abri-lo.

3. Abra o painel Biblioteca – se não estiver aberto no lado direito da Interface, selecione Janela > Biblioteca – e gire para baixo o [MR] Vídeo de fundo em tela cheia pasta.

4. Arraste o widget da pasta para a página.

5. Você notará o Opções pedimos que você insira os nomes das versões mp4 e webm dos vídeos. Digite os nomes exatamente como estão escritos na pasta onde os colocou. Um pequeno truque para garantir que você não cometa um erro é copiar o nome do vídeo mp4 e colá-lo no MP4 e WEBM áreas do Menu de opções.

   Outro truque: tudo o que esse widget faz é escrever o código HTML 5 para você. Você pode dizer isso porque você vê <> no widget. Nesse caso, você pode colocar o widget da página da web na área de trabalho e ele ainda funcionará. Dessa forma, não interfere em nenhum conteúdo que você colocará na página.

Como adicionar vídeo e testar uma página no Adobe Muse CC

Embora você tenha adicionado o código que reproduzirá os vídeos, o Muse ainda não sabe onde esses vídeos estão localizados.

1. Para corrigir isso, selecione Arquivo > Adicionar arquivos para upload.

2. Quando o Caixa de diálogo de upload abre, navegue até a pasta que contém seus vídeos, selecione-os e clique em Abrir.

3. Para garantir que eles foram carregados, abra o Painel de ativos, e você deve ver seus dois vídeos. Basta deixá-los no painel. Eles não precisam ser colocados na página.

4. Para testar o projeto, selecione Arquivo > Página de visualização no navegador ou, porque esta é uma única página, Arquivo > Pré-visualizar o site no navegador. Seu navegador padrão será aberto e o vídeo será reproduzido.

5. Neste ponto, você pode tratar o arquivo Muse como uma página da web normal e adicionar conteúdo à página inicial, e o vídeo será reproduzido abaixo dela.

Como adicionar um quadro de pôster de vídeo no Adobe Muse CC

É da web que estamos falando aqui e, dependendo da velocidade de conexão, há uma boa chance de seu usuário abrir a página e ficar olhando para uma tela em branco enquanto o vídeo carrega. Isso não é uma coisa boa. Veja como lidar com essa maldade. É uma “prática recomendada” incluir um quadro de pôster do vídeo, que aparecerá enquanto o vídeo carrega. Geralmente é uma captura de tela em tamanho real de um quadro do vídeo.

1. Para adicionar o quadro do pôster, clique uma vez em Preenchimento do navegador no topo da página.

2. Clique no Link da imagem e navegue até a imagem a ser usada.

3. No Apropriado área, selecione Escala para Preencher e clique no Ponto central no Posição área. Isso garantirá que a imagem sempre será dimensionada a partir do centro da imagem quando o tamanho da janela de visualização do navegador mudar. Você também verá a imagem preencher a página.

4. Outro pequeno truque é ter uma cor de preenchimento sólida caso o quadro do pôster demore um pouco para aparecer. Para fazer isso, clique no Cor chip para abrir o Muse Color Picker. Selecione os conta-gotas ferramenta e clique em uma cor predominante na imagem. Quando terminar, clique na página para fechar a caixa de diálogo Preenchimento do navegador.

5. Neste ponto, você pode salvar o projeto ou publicá-lo. A parte final desta série mostra como escrever o código HTML5 que desliza um vídeo para o fundo de uma página da web.