Introduction à la définition de l'arrière-plan vidéo en HTML5

Nous avons souvent besoin d'utiliser des vidéos comme arrière-plan des pages Web, mais le réglage est souvent insatisfaisant. Je l'ai configuré aujourd'hui et il peut essentiellement répondre aux exigences. pas très bien fait. OK, j'espère que vous pourrez le signaler et progresser ensemble

Première étape : Préparation

Si vous voulez bien faire votre travail, vous Il faut d'abord affûter ses outils. Nous devons d'abord préparer une vidéo. J'ai préparé une vidéo comme celle-ci, comme le montre l'image :

C'est pas beau, bien sûr ? , ce n'est pas aussi beau que moi.

Deuxième étape : introduire la vidéo

Ici, nous devons utiliser la balise video/, puis écrire le chemin de la vidéo dans la source, la lecture automatique est utilisée pour la faire jouer automatiquement, mute est utilisée pour la couper et la boucle est utilisée pour la lire en boucle, vous pouvez l'ajouter selon vos souhaits personnels, ou vous ne le ferez pas si vous le faites. t

<video id="v1" autoplay muted loop style="width: 100%">
    <source  src="mp4/loading.mp4">
</video>

Étape 3 : Ajustez la vidéo pour l'adapter à l'écran

Les étapes ci-dessus ne peuvent pas répondre à nos besoins pour le moment. Vous constaterez qu'il y a des barres de défilement et la vidéo se bloquera. le contenu que nous voulons afficher, mais c'est loin du résultat que nous souhaitons. N'ayez pas peur, je suis là

video{
          position: fixed;
          right:0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -9999;
          /*灰色调*/
          /*-webkit-filter:grayscale(100%)*/
 
      }

C'est OK, -webkit-filter : Grayscale (100%) est utilisé pour. ajustez la tonalité de couleur, et cela est également applicable à img

Étape 4 : Vitesse de lecture vidéo

Vous pouvez utiliser l'attribut playbackRate de la vidéo pour contrôler la lecture vidéo vitesse, si vous souhaitez que la vidéo d'arrière-plan soit lue à une vitesse lente, vous pouvez ajouter le javascript suivant

<script>
    var video= document.getElementById(&#39;v1&#39;);
    video.playbackRate = 0.5;
</script>

D'accord, allez configurer votre arrière-plan cool

Plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!