Lynda.com Concevez la vidéo de fond HTML Web

• Mai 10, 2024

La vidéo d'arrière-plan est un excellent moyen de commercialiser votre produit et dans cette formation vidéo sur Lynda.com intitulée Concevoir le Web: vidéo de fond HTML avec Chris Converse, vous apprendrez comment ajouter une vidéo d'arrière-plan en lecture automatique à votre page Web. Vous apprendrez également à utiliser CSS pour placer d'autres éléments de conception sur la vidéo d'arrière-plan. Et les fichiers d'exercices sont gratuits, même pour les membres Standard.

Converse commence avec un fichier html bare bones et construit le conteneur div principal pour les éléments de conception: le slogan de texte, le logo svg et la vidéo. Il montre comment utiliser la lecture automatique dans le tag vidéo et comment configurer les deux types de vidéo les plus courants, .mp4 et .ogg.

Ensuite, Converse se déplace vers les fichiers CSS et le CSS pour styliser et positionner la vidéo et l'image du logo centrée. Il continue à faire de même pour le texte du slogan. J'ai particulièrement aimé sa technique de travail avec les bordures.

Converse explique ensuite comment rendre cette mise en page adaptée en utilisant des requêtes multimédias pour les écrans moyens et petits et CSS. Encore une fois, il définit les styles de la vidéo, du logo et du slogan. Il montre également comment définir une image de remplacement pour les petits écrans qui ne peuvent pas lire une vidéo et masquer la vidéo.

Passant à des problèmes plus complexes, Converse montre comment utiliser JavaScript pour ajouter un contrôle plus complexe sur l'affichage des fonctionnalités des appareils mobiles, telles que les événements tactiles. Il présente un site Web tiers appelé Modernizr qui générera des classes CSS qui peuvent être ajoutées à la page via JavaScript en fonction des fonctionnalités de l'appareil actuel. Il montre comment générer le code, le télécharger et l'ajouter à votre code de page Web.

Dans la dernière leçon, Converse montre comment coder la position et les autres styles de la disposition afin que la vidéo couvre toute la fenêtre du navigateur.

Ce cours portait sur le HTML et le CSS utilisés pour styliser et positionner une vidéo d'arrière-plan pour le Web et les appareils mobiles. Cependant, j'espérais que l'auteur discuterait des options d'hébergement et d'optimisation du fichier vidéo pour un téléchargement rapide. De plus, il serait bon de savoir comment ajouter des éléments de conception interactive sur la vidéo d'arrière-plan au lieu de simplement des éléments statiques.

Chris Converse est diplômé en design graphique du Rochester Institute of Technology et a 22 ans d'expérience en design et technologie.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Divulgation: je n'ai pas été compensé financièrement pour cet article. Les opinions sont entièrement les miennes en fonction de mon expérience.

Instructions Vidéo: [MEETUP STAR D'UX # ] UX & Accessibilité, Épisode I - Avril 2018 (Mai 2024).