Dicas úteis

Dica 1: como incorporar um vídeo em um site

Pin
Send
Share
Send
Send


Se você se deparar com a questão de adicionar um videoclipe às páginas do seu site ou blog, mas não sabe como fazê-lo, esta lição é para você! Nesta lição, examinaremos três maneiras alternativas de adicionar vídeo ao site e você pode escolher a que mais gosta.



A Internet está se desenvolvendo a cada dia mais e mais. Hoje, os usuários desejam não apenas ler textos, mas também ver vários elementos gráficos, vários dispositivos interativos e ainda assistir a vídeos diretamente de páginas da web. Em muitos casos, isso cria comodidade adicional para o usuário (por exemplo, quando ele pode assistir às instruções em vídeo) ou apenas torna sua estadia na Web mais divertida.

De uma forma ou de outra, seja um vídeo útil com uma lição ou instrução, um vídeo de demonstração de um produto ou um vídeo divertido projetado para alegrar o lazer do usuário, mais cedo ou mais tarde, é necessário incorporar esse vídeo em uma página da web.

Existem várias maneiras de fazer isso. Hoje, consideraremos três maneiras diferentes que ajudarão você a lidar com essa tarefa. Qual escolher depende de você. Então vamos lá ...

Como incorporar um vídeo em um site

Para testar todos os nossos exemplos, vou criar um arquivo html e também conectar alguns estilos a ele. Abaixo está o código para este arquivo e o código para a folha de estilo que está conectada ao documento html. Você também pode encontrar todos esses arquivos na fonte da lição. Não explicarei esse código aqui, pois é bem simples e acho que você o entenderá muito bem; no entanto, se algo não estiver claro, você sempre poderá escrever sua própria pergunta nos comentários e eu responderei. Definitivamente vou responder.

Então, o código do arquivo html:

Este é apenas um arquivo html5 que contém vários cabeçalhos. Além disso, sob cada um deles, colocaremos o código correspondente.

Também registrei alguns estilos para esta página. Eles são armazenados no arquivo "style.css", que fica no mesmo diretório que o arquivo html. O conteúdo do arquivo style.css é o seguinte:

Se abrirmos o arquivo html em um navegador, agora ele ficará assim:

Terminada a preparação, vamos inserir o vídeo na própria página da web.

Primeira maneiraque iremos considerar - esta é uma inserção de vídeo usando o serviço Youtube.

1. A primeira coisa que precisamos é ter algum tipo de videoclipe que queremos inserir. Digamos que temos e é armazenado em nosso computador local.

Agora vá para www.youtube.com. Aqui, precisamos clicar no botão "Login" localizado no canto superior direito. Depois disso, você precisa fazer login usando sua Conta do Google. Se de repente você ainda não o tiver, primeiro precisará obtê-lo.

2. Depois de inserir o serviço em sua conta, clique no botão "Adicionar vídeo". O serviço solicitará que você selecione um arquivo para baixar e você pode selecionar o arquivo desejado, armazenado no seu computador.

Depois de selecionar o arquivo desejado, ele começará a ser carregado. Você precisa esperar um pouco até que esteja totalmente carregado.

Após o download completo do vídeo, você pode clicar no link (você pode vê-lo no topo, logo após a mensagem de que o download está concluído).

Ao clicar neste link, você verá seu vídeo postado no serviço Youtube.

3. Agora precisamos obter o código para incorporar o vídeo em nossa página da web. Para fazer isso, logo abaixo do vídeo, clique na guia "Compartilhar" e, na guia "Código HTML".

Agora você pode ver o código html que precisaremos inserir. Aqui você também pode definir outros parâmetros, como: o tamanho do vídeo, exibição de vídeos semelhantes após o modo de exibição e privacidade.

Ao configurar todos os parâmetros, você pode copiar o código e colá-lo no seu arquivo html. Colarei o código no arquivo no cabeçalho apropriado da seguinte maneira:

E agora, se olharmos para o trabalho do nosso arquivo html no navegador, veremos que o vídeo foi inserido e pode ser visualizado (você pode ver o código em ação clicando no ícone "Demo" no início do artigo).

Aqui, eu acho, está tudo claro. Vamos para o próximo método.

Insira o vídeo usando o script do player.

Você pode inserir um vídeo sem enviá-lo para qualquer serviço de vídeo. Se, por algum motivo, você não quiser enviar um vídeo para o serviço, use o script do player.

Portanto, você deve ter um vídeo que irá enviar. Digamos que ele esteja armazenado em uma pasta no seu site. Vou salvar o arquivo de vídeo em uma pasta chamada "video".

Agora precisamos do próprio jogador. No momento, existem muitos players gratuitos com os quais você pode inserir vídeos no site. Vamos usar o Flowplayer. Este é um player de vídeo na web gratuito projetado especificamente para os proprietários de sites.

1. Faça o download dos arquivos do player no seu computador clicando aqui neste link: FlowPlayer

2. Depois de baixar os arquivos do player no seu computador, você precisa descompactá-los em uma pasta no seu site. Criei a pasta “flowplay” e descompacte os arquivos lá.

3. Agora vamos passar para o arquivo html e estaremos envolvidos em um código.
A primeira coisa que precisamos fazer é conectar o arquivo javascript do player ao nosso arquivo html. Para isso dentro da tag cabeça, imediatamente após conectar a folha de estilo, escreva o seguinte código:

Se você colocar o arquivo em outra pasta, preste atenção que o caminho para o arquivo está escrito corretamente.

4. Agora, vamos entrar no corpo do nosso arquivo e colocar o próprio player com o arquivo que está sendo reproduzido. Vou colocá-lo diretamente sob o cabeçalho correspondente, depois de colocá-lo na tag div, que se alinhará no centro.

Aqui você precisará verificar os caminhos dos arquivos e registrar os seus. Ao fazer isso, tenha cuidado.

Também existem configurações que impedem que o vídeo seja iniciado automaticamente, mas permitem que ele seja baixado. Se você deseja que o vídeo inicie automaticamente, depois do caminho para o arquivo “flowplayer-3.2.2.swf”, remova a vírgula, feche o parêntese e coloque “,” (sem aspas) e tudo o que for depois e antes tag de fechamento "/ script" para remover.

Assim, se verificarmos a página no navegador, veremos que agora temos dois vídeos: um é baixado do serviço do youtube e o outro é armazenado em nosso site e carregado com o player.

Lembre-se de que o vídeo enviado pelo player deve estar no formato .mp4 ou .flv.

Vamos tentar de outra maneira e tentar baixar o mesmo vídeo., que é armazenado em nosso servidor, mas apenas com os novos recursos do HTML5.

1. Encontre o terceiro cabeçalho e escreva o seguinte código diretamente abaixo:

Se você abrir a página em um navegador, verá que seu vídeo foi adicionado sob o terceiro título. Tão simples! Apenas uma linha.

Certifique-se de verificar o caminho para o arquivo de vídeo para corresponder ao local em que ele foi localizado.

A opção de controles adiciona um painel de controle para o vídeo.

Se você deseja que seu vídeo seja reproduzido imediatamente após o carregamento da página, é necessário adicionar o parâmetro "reprodução automática".

Esse método atende aos novos padrões html5 e, acredito, interessará aos desenvolvedores que desejam implementar padrões futuros hoje.

No entanto, existem armadilhas, por exemplo, suporte a navegador diferente para diferentes formatos de multimídia. Este exemplo funcionará muito bem em todos os novos navegadores, mas não no navegador Opera. Para que esse código funcione no Opera, devemos converter o arquivo de vídeo para o formato Ogg Theora e alterar um pouco o código para dar ao navegador uma opção alternativa.

Você pode converter o arquivo usando o serviço online-convert.com/. Após a conversão, salve o arquivo resultante na pasta "video" e altere o código para inserir o vídeo da seguinte forma:

Agora, o exemplo funcionará no navegador Opera.

No entanto, há outro problema em navegadores antigos que não entendem as tags html5. Infelizmente, a transição para novos padrões também requer a capacidade de encontrar soluções alternativas.

Se uma tag não estiver familiarizada com o navegador, ela simplesmente a ignora, mas não ignora o conteúdo dentro de um elemento desconhecido. Portanto, podemos adicionar uma solução alternativa diretamente à nossa tag para incorporar um vídeo. O código pode ficar assim:

Com esse código, as versões mais recentes dos navegadores processam com êxito nosso elemento de vídeo e, se um usuário abrir uma página de repente usando um navegador antigo, a tag de vídeo desconhecida será ignorada, mas a tag iframe será processada com êxito e o vídeo será baixado do Youtube.

Talvez isso acabe. Lembro que você pode baixar todos os materiais de origem clicando no ícone "Fontes" no início do artigo, e você pode ver o trabalho dos três exemplos clicando no ícone "Demonstração" no mesmo local.

Deixe seus comentários e compartilhe este artigo com seus amigos usando os botões das redes sociais. Eu ficaria muito grato.

Assine também as atualizações do blog. A seguir, há muitos tópicos interessantes e úteis sobre a criação de sites.

Desejo-lhe bom humor e sucesso no seu trabalho!

Pin
Send
Share
Send
Send