Exemple de mise en œuvre facile d'un arrière-plan vidéo plein écran à l'aide de HTML5

Vous souhaitez lire une vidéo en plein écran sur votre page d'accueil ? Cette vidéo sert d'arrière-plan à la page Web et n'affecte pas la navigation normale du contenu Web. Alors laissez-moi vous dire qu'il existe une bibliothèque Javascript qui correspond à vos besoins, il s'agit de Bideo.js.

Ajustement automatique : Bideo.js peut ajuster automatiquement la taille de la vidéo en fonction de la taille de la fenêtre actuelle du navigateur. Lorsque la fenêtre du navigateur est ajustée, elle s'adaptera à la taille de la fenêtre. Les côtés mobile et PC peuvent s'ajuster automatiquement pour que la vidéo. peut être utilisé comme arrière-plan et affiché en plein écran.

Superposition : une fois la vidéo utilisée comme arrière-plan de la page Web, nous pouvons placer n'importe quel contenu HTML au-dessus de la vidéo.

Couverture vidéo : lorsque la page est ouverte, le chargement de la vidéo peut prendre quelques secondes. Nous pouvons ensuite définir une image comme couverture de la vidéo et attendre qu'elle soit chargée avant de la lire.

Ajoutez le code HTML suivant au corps de votre page. Évidemment, la balise <video> est utilisée pour charger des vidéos, l'attribut loop fait référence à la boucle de la vidéo et mute fait référence au mode muet, c'est-à-dire que le volume est de 0. #video_cover est la couverture vidéo par défaut. #overlay est le calque de masque sur lequel tout le reste du contenu de la page est affiché.

 <div id=container> <video id=background_video loop muted></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <section id=main_content> <div id=head> <h1>HTML5 implémente facilement un arrière-plan vidéo plein écran - Bideo.js</h1> <p class=sub_head>Une bibliothèque Javscript qui peut facilement ajouter une vidéo d'arrière-plan plein écran à la page </p> <p class=info>(Attendez un instant, la vidéo prendra un certain temps à charger.)</p> </div> </section></div>

Nous avons également ajouté #video_controls, qui est utilisé pour contrôler la lecture et la pause vidéo, adapté aux téléphones mobiles. Enfin, vous pouvez ajouter tout contenu HTML que vous souhaitez afficher dans la section suivante.

CSS est également essentiel. Les éléments les plus importants auxquels il faut prêter attention sont les paramètres de #container et #background_video. Le code CSS suivant peut être extrait directement sans explication :

 * { margin : 0 ; remplissage : 0 ;}html, corps { largeur : 100 % ; hauteur : 100 % ; débordement : caché ;}#conteneur { débordement : caché ; : 0 ; bas : 0 ; hauteur : 100 % ;}#background_video { position : haut : 50 % ; gauche : 50 % ; -50 % ); ajustement de l'objet : couverture ; hauteur : 100 % ; largeur : 100 % ;}#video_cover { position : absolue ; hauteur : 100 % ; -repeat ; taille d'arrière-plan : couverture ; position d'arrière-plan : centre ;}#overlay { position : haut : 0 ; gauche : 0 ; rgba(0,0,0,0.5);}

Chargez d’abord la bibliothèque Bideo :

 <script src=bideo.js></script>

Instanciez ensuite le bido : new Bideo(), puis initialisez directement le chargement et définissez les options suivantes :

 (function () { var bv = new Bideo(); bv.init({ // Élément vidéo videoEl : document.querySelector('#background_video'), // Conteneur d'élément conteneur : document.querySelector('body'), / / Redimensionnement de l'ajustement adaptatif : true, // lecture automatique : false, isMobile : window.matchMedia('(max-width : 768px)').matches, playButton : document.querySelector('#play'), pauseButton: document.querySelector('#pause'), // Chargez la source vidéo et remplacez votre propre fichier source vidéo en fonction de l'activité réelle src : [ { src : " http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', tapez : 'video/mp4' }, { src : 'night.webm', tapez : 'video/webm;codecs=vp8, vorbis' } ], // Une fois la vidéo chargée, la couverture vidéo sera masquée lors du chargement : function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());

Juste comme ça, une page vidéo d'arrière-plan de grande qualité est terminée. Bienvenue pour voir la démo en ligne DEMO et télécharger le code source. Pour plus d'informations sur Bideo.js, veuillez consulter l'adresse du projet github : https://github.com/rishabhp/bideo.js.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.