Jornal Harry Potter

Criamos vídeos em páginas como no lendário jornal Harry Potter.
Para criar a máxima imersão!


Para criar isso, precisamos de um pequeno vídeo (visualização), que será executado em loop e sem som. O segundo vídeo é um vídeo comum com som que é ativado quando você passa o mouse, clica ou rola.

Código HTML incorporado na página:

<div class="smartVideo graysv"> <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div> 

2 o vídeo agrupado em uma div é marcado com a classe smartVideo e a classe graysv é adicionada se você precisar de um filtro em preto e branco no vídeo até que ele seja ligado ou sem som!

data-cprotate - informa ao script que haverá uma rotação do vídeo principal e da visualização.
data-src - caminho para o arquivo de vídeo.
data-poster - o caminho para a imagem exibida enquanto o vídeo está sendo carregado.
playsinline - para execução automática em smartphones, ele não inicia sem ele.
pip = "false" - para que os navegadores não mostrem o botão de download.

Para o primeiro clipe, devemos definir os atributos loop inativo data-inits = reprodução automática , o que significa: silencioso , em loop e inicialização automática, se visível na tela.

Para o primeiro videoclipe, existe um atributo data-cprotatehover , que é opcional e significa iniciar o vídeo quando você passa o mouse sobre ele. Você não precisa colocá-lo no segundo vídeo!

O segundo vídeo precisa especificar volume de dados = 1 volume, mas se você não deseja sons, defina 0 .

Um exemplo de como fazer comentários na página.

Para conectar, você precisa inserir estilos CSS na página:

 <style> .smartVideo{ width:300px; } .smartVideo video { width:100%; z-index:0; position: absolute; top:0; left:0; user-select:none; border:0; padding:0; margin:0; vertical-align:middle; cursor:pointer; outline:none; } .smartVideo > video:first-child { position:relative; z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){ -webkit-filter: none; -ms-filter: none; filter: none; } </style> 

E precisamos de um arquivo JS que precise ser conectado antes da tag do corpo de fechamento.

 <script src="/smartvideo.js"></script> 

Fontes para download

O roteiro reuniu-se às pressas!

Se houver muitos interessados, será possível criar uma biblioteca completa com várias configurações e colocá-la no github!

Novamente, se alguém estiver interessado no lado técnico do JavaScript, escreva, eu posso pintar o código JavaScript no próximo artigo (embora eu tenha que penteá-lo bem e limpá-lo antes disso! :-)

Pontos principais do smartVideo:

1. Funciona em smartphones e tablets.
2. Para automaticamente o vídeo se uma pessoa alternar para uma chamada ou alternar entre as guias do navegador.
3. Para ou inicia automaticamente o vídeo ao rolar a página!
4. Inicia o download de vídeos e pôsteres somente quando o vídeo está à vista.

PS: Como formatar o código html smartVideo para leitores de tela?

Atenciosamente, Criador do Landing Designer para Freelancers CMS cPortfolio