Journal Harry Potter

Nous créons des vidéos sur des pages comme dans le légendaire journal Harry Potter.
Pour créer une immersion maximale!


Pour créer cela, nous avons besoin d'une courte vidéo (aperçu), qui sera bouclée et sans son. La deuxième vidéo est une vidéo régulière avec du son qui s'allume lorsque vous survolez, cliquez ou faites défiler.

Code HTML intégré à la page:

<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 vidéos enveloppées dans un div sont marquées avec la classe smartVideo et la classe graysv est ajoutée si vous avez besoin d'un filtre noir et blanc sur la vidéo jusqu'à ce qu'elle soit activée ou sans son!

data-cprotate - indique au script qu'il y aura une rotation de la vidéo principale et de l'aperçu.
data-src - chemin vers le fichier vidéo.
data-poster - le chemin vers l'image qui est affichée pendant le chargement de la vidéo.
playsinline - pour l' exécution automatique sous les smartphones, il ne démarrera pas sans lui.
pip = "false" - pour que les navigateurs n'affichent pas le bouton de téléchargement.

Pour le premier clip, nous devons définir les attributs muted loop data-inits = autoplay , ce qui signifie: silencieux , en boucle et démarrage automatique si visible à l'écran.

Pour le premier clip vidéo, il y a un attribut data-cprotatehover , qui est facultatif et cela signifie démarrer la vidéo lorsque vous passez la souris dessus. Vous n'avez pas besoin de le mettre sur la deuxième vidéo!

La deuxième vidéo doit spécifier data-volume = 1 volume, mais si vous ne voulez pas de sons, vous devez définir 0 .

Un exemple de comment faire des critiques sur la page.

Pour vous connecter, vous devez insérer des styles CSS sur la page:

 <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> 

Et nous avons besoin d'un fichier JS qui doit être connecté avant la balise de fermeture du corps .

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

Sources à télécharger

Le script s'est empressé!

S'il y en a beaucoup, il sera possible de créer une bibliothèque à part entière avec différents paramètres et de la mettre sur un github!

Encore une fois, si quelqu'un s'intéresse au côté technique de JavaScript, écrivez, je peux peindre du code JavaScript dans le prochain article (bien que je doive bien le peigner et le nettoyer avant ça! :-)

Points clés de smartVideo:

1. Fonctionne sous smartphones et tablettes.
2. Arrête automatiquement la vidéo si une personne passe à un appel ou bascule entre les onglets du navigateur.
3. Arrête ou démarre automatiquement la vidéo lors du défilement de la page!
4. Commence à télécharger des vidéos et des affiches uniquement lorsque la vidéo est en vue.

PS: Comment formater le code html smartVideo pour les lecteurs d'écran?

Cordialement, Créateur de Landing Designer for Freelancers CMS cPortfolio