HTML5 implémente un arrière-plan vidéo dynamique

Tout d'abord, jetons un œil aux rendus implémentés :

(Apprentissage du partage de vidéos : Tutoriel vidéo html5)

Ça n'a pas l'air cool ?

Si vous aussi vous souhaitez obtenir cet effet, alors venez apprendre avec moi.

Étapes spécifiques :

Trouvez d'abord une vidéo claire en ligne et téléchargez-la, de préférence au format MP4

Après le téléchargement, nous créons un nouveau fichier html pour écrire le code :

Code HTML :

		<video id="v1" autoplay loop muted>
  			<source src="./video2.mp4" type="video/mp4"  />
		</video>

est entouré d'une balise vidéo, la source représente le fichier source, l'attribut de lecture automatique est la lecture automatique, la boucle représente la lecture en boucle et la sourdine représente la lecture silencieuse
;

Code CSS :

 *{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); //背景灰度设置*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        }

Le code CSS est principalement destiné au positionnement et à l'amplification pour obtenir l'effet de lecture plein écran. Il est principalement utilisé pour définir la largeur et la hauteur de la vidéo. n'oubliez pas de donner la valeur du z-index, laissez-le être placé en bas, tant qu'il est inférieur à 0, cela n'aura aucun effet

De cette façon, notre fond vidéo dynamique ; est terminé. Si nous voulons définir la vitesse de lecture, nous pouvons ajouter du code js (video Tag plus attribut id="v1") :

        var video= document.getElementById('v1');
            video.playbackRate = 1.5;

Et si nous voulons ajouter du contenu à la page ?

		<video id="v1" autoplay loop muted>
  			<source src="./video2.mp4" type="video/mp4"  />
        </video>	
        <h1 style="color:white">123465</h1>

Oui, ajoutez-le en dehors de la balise vidéo, et notre rendu ressemblera alors à ceci (comme le blog a des restrictions sur la taille de l'image, le temps de capture d'écran n'est pas très long) :

N'est-ce pas très simple ? Dépêchez-vous et essayez-le vous-même.

Recommandations associées : Tutoriel HTML5

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!