Comment faire pour créer un arrière-plan de la vidéo en plein écran avec HTML5 vidéo

Précédent ◈ Suivant

Heureusement pour nous, les médias fait une grande poussée dans le feu des projecteurs comme HTML5 natif. Nous avons maintenant un grand nombre de différents types de médias à notre disposition, y compris la vidéo.

HTML5 Video Aujourd'hui

compatibilité vidéo HTML5 est très élevé. En fait, il est pris en charge dans tous les navigateurs modernes (> IE8). Le fonctionnement interne de la vidéo en général peut être compliqué, surtout quand vous commencez à creuser dans des formats multiples, des pistes, des conteneurs, et les œuvres.

Je vais vous épargner le changement pour ce tutoriel, mais je suggère de prendre une lecture sur cet article, j'ai écrit il y a quelque temps. Ce que vous devez savoir est que lorsque vous implémentez vidéo sur le web, vous avez besoin d'accueillir trois formats:

Pour obtenir vos formats vidéo en échec, je suggère d'utiliser l'outil de ffmpeg robuste. Si vous voulez juste jouer pour l'instant, alors formats mp4 devrait faire l'affaire.

Utilisation de la vidéo dans votre document HTML5 est aussi facile que cela:

Si le navigateur ne supporte pas la vidéo du tout, il vous reste plus qu'à ignorer les balises de source et revenir sur le texte de l'espace réservé. théorie Bon, assez. Creusons dans.

Configuration de notre HTML

Imaginons que nous voulons construire une page avec une vidéo de fond plein écran. Disons que c'est une page d'atterrissage pour votre nouveau produit, alors que la vidéo ci-dessus, nous voulons un texte en-tête, certains sous-texte, et un appel à bouton d'action. droit de choses assez simple? Eh bien, presque.

Nous ne pouvons pas tout à fait avoir un seul conteneur avec une vidéo de fond en CSS, et le texte dans ce conteneur. CSS ne permet pas de vidéo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit Qui voluptatum enim is deserunt assumenda, aspernatur quam aperiam, fugiat moins aliquam quisquam HIC repudiandae nobis architecto IPSA numquam Facilis nisi!

Pose La base CSS

Parce que nous n'utilisons quelques éléments dans cette démo, je ne vais pas utiliser une réinitialisation CSS ou normalisateur. Écrivons juste notre propre:

En plus de cela, débarrassons-nous de la police par défaut, et comprennent l'oxygène de polices Google.

Rappelez-vous, nous sommes intéressés par une vidéo en plein écran et fenêtre, donc nous devons nous assurer que nos éléments html et le corps sont en plein écran. Notre CSS de base devrait ressembler à ceci:

D'accord, nous allons passer!

Superposition Notre contenu

Nous savons que nous voulons que notre contenu en couches, et cela signifie que nous devons tirer parti de z-indexation. Notre contenu lui-même existera dans le flux normal du HTML, mais notre vidéo reste fixe et en arrière-plan. Commençons par ce qui suit:

Ajoutons un peu plus de style à notre contenu afin que nous puissions l'oublier et se concentrer sur notre vidéo. Nous ferons cette position grand et gras, et le style le bouton un peu trop. Je vais juste utiliser quelques moyennes du globe oculaire pour obtenir le contenu centré verticalement, mais il y a d'autres trucs (comme nous le verrons plus loin). Voici ce que je suis venu avec:

des choses assez simples, mais au moins il y a un certain attrait visuel, ce qui le rend un peu plus facile pour nous de travailler. Maintenant, nous avons un peu d'un problème avec notre vidéo. En ce moment, il est juste épinglé en haut à gauche de l'écran, et si vous êtes sur un plus grand écran, il est peu probable occupant tout l'espace disponible. Regardons cela.

Centrer - Full-screening La vidéo

Il y a un petit truc astucieux flottant autour de ces jours-ci pour maintenir un centre vertical parfait d'un tout à fait (ou fixe) élément positionné par rapport à son récipient. Il tire parti de haut et de transformation. La traduction d'un élément par une valeur de pourcentage est calculé en fonction des dimensions des éléments.

Donc, si nous Nudge quelque 50% par rapport au-dessus d'un récipient, puis retraduire un négatif de 50%, il sera parfaitement centrée. Cela nous laisse avec ceci:

Maintenant, qu'en est-il de dépistage complet? Eh bien, nous devons forcer que, avec un peu de CSS à nouveau, en utilisant des largeurs et hauteurs minimales. Voici la CSS complète pour la vidéo:

Maintenant, nous avons une vidéo plein écran en arrière-plan! Mais attendez une seconde ... il est même pas jouer. Nous allons maintenant gérer.

Contrôle du vidéo

Il y a une foule d'attributs à notre disposition, et vous pouvez les voir tous ici. Nous ne nous intéressons à trois d'entre eux, mais prendre note que par défaut, les contrôles ne sont pas visibles. Parce que nous essayons de réaliser que nous garderons cette façon quelque chose qui est purement esthétique,. Les trois autres attributs qui nous intéressent sont les suivants:

AutoPlay - si cela est spécifié, la vidéo commencera automatiquement à jouer
mis en sourdine - indique le réglage par défaut de l'audio contenu dans la vidéo
boucle - si elle est spécifiée, nous allons, après avoir atteint la fin de la vidéo, rechercher automatiquement au début

Autoplay est important, parce que nous nous cachons les contrôles en premier lieu, et nous voulons que la vidéo à jouer réellement. Muted est également important, et pourquoi est ici. Il est déjà un peu intrusif pour déjouer une vidéo et ne pas permettre à un utilisateur de mettre en pause ou arrêter. Mais nous pouvons nous excuser un peu, parce que tout est au nom de la valeur esthétique.

Cependant, si nous auto-lecture d'une vidéo, nous voulons certainement couper le son par défaut. Enfin, il y a l'attribut boucle. Ce n'est pas vraiment important pour ainsi dire, mais sachez simplement que si vous avez un clip vidéo en boucle, cet attribut prend en charge facilement. Ajoutons ces trois attributs à notre vidéo:

Actualisez dans le navigateur, et le tour est joué! Vous avez terminé, et il semble beau.

Considérations - Taking It En outre

JOUONS - envoyé lorsque les données disponibles est assez que les médias peuvent être lus, au moins pour un couple de cadres
canplaythrough - envoyé lorsque l'état de prêt des changements ... indiquant que les médias entiers peuvent être lus sans interruption

Assez chouette, hein?

Maintenant, il est très important de noter que les événements médiatiques et les méthodes sont des choses très modernes, et le soutien du navigateur est dispersée dans tous les sens. Mais soyez conscient de tout cela bien, parce qu'il est là pour rester, et ne deviendra plus soutenue à l'avenir.

Pour l'instant cependant, assurez-vous que vous avez les vérifications nécessaires mis en place pour différents navigateurs, quand utiliser quoi, et si pour inclure les JS extrait ci-dessus du tout. Ah, le web moderne.

Avec un peu de compréhension, la ruse CSS, et l'expérimentation, nous avons pu créer un effet visuellement superbe.

A propos de l'auteur Nick Salloum

grand article m'a vraiment aidé. Une question cependant. Je remarqué que je ne vois pas la vidéo sur le réseau quand je recharger la page, comment se fait-il ne montre pas le chargement vidéo, ni la taille de la vidéo en devtools?

Articles Liés

Précédent ◈ Suivant