Periódico Harry Potter

Creamos videos en páginas como en el legendario periódico Harry Potter.
¡Para crear la máxima inmersión!


Para crear esto, necesitamos un video corto (vista previa), que será en bucle y sin sonido. El segundo video es un video normal con sonido que se encenderá cuando desplace el mouse, haga clic o se desplace.

Código html incrustado en la 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 videos envueltos en un div se marcan con la clase smartVideo y se agrega la clase graysv si necesita un filtro blanco y negro en el video hasta que se encienda o sin sonido.

data-cprotate : le dice al script que habrá una rotación del video principal y de vista previa.
data-src : ruta al archivo de video.
cartel de datos : la ruta a la imagen que se muestra mientras se carga el video.
playsinline : para la ejecución automática en teléfonos inteligentes, no se iniciará sin ella.
pip = "false" - para que los navegadores no muestren el botón de descarga.

Para el primer clip, debemos establecer los atributos muted loop data-inits = autoplay , lo que significa: silencioso , en bucle e inicio automático si es visible en la pantalla.

Para el primer videoclip, hay un atributo data-cprotatehover , que es opcional y significa iniciar el video cuando pasa el mouse sobre él. ¡No necesitas ponerlo en el segundo video!

El segundo video necesita especificar data-volume = 1 volume, pero si no desea sonidos, entonces necesita establecer 0 .

Un ejemplo de cómo hacer reseñas en la página.

Para conectarse, debe insertar estilos CSS en la 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> 

Y necesitamos un archivo JS que deba conectarse antes de la etiqueta de cierre del cuerpo .

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

Fuentes para descargar

El guión se reunió a toda prisa!

Si hay muchos interesados, ¡será posible hacer una biblioteca completa con varias configuraciones y ponerla en un github!

Nuevamente, si alguien está interesado en el aspecto técnico de JavaScript, escriba, puedo pintar el código JavaScript en el siguiente artículo (¡aunque tengo que peinarlo bien y limpiarlo antes de eso! :-)

Puntos clave de smartVideo:

1. Funciona bajo teléfonos inteligentes y tabletas.
2. Detiene automáticamente el video si una persona cambia a una llamada o cambia entre las pestañas del navegador.
3. ¡Detiene o inicia automáticamente el video al desplazarse por la página!
4. Comienza a descargar videos y carteles solo cuando el video está a la vista.

PD: ¿Cómo formatear el código html de smartVideo para lectores de pantalla?

Atentamente, Creador del Diseñador de aterrizaje para Freelancers CMS cPortfolio