Beispiel für die einfache Implementierung eines Vollbild-Videohintergrunds mit HTML5

Möchten Sie ein Video im Vollbildmodus auf Ihrer Homepage abspielen? Dieses Video wird als Hintergrund der Webseite verwendet und hat keinen Einfluss auf das normale Surfen im Webinhalt. Dann möchte ich Ihnen sagen, dass es eine Javascript-Bibliothek gibt, die Ihren Anforderungen entspricht: Bideo.js.

Automatische Anpassung: Bideo.js kann die Videogröße automatisch an die Größe des aktuellen Browserfensters anpassen. Sowohl die mobile als auch die PC-Seite können sich automatisch an die Fenstergröße anpassen kann als Hintergrund verwendet und im Vollbildmodus angezeigt werden.

Overlay: Nachdem das Video als Hintergrund der Webseite verwendet wurde, können wir beliebige HTML-Inhalte über dem Video platzieren.

Video-Cover: Beim Öffnen der Seite kann das Laden des Videos einige Sekunden dauern. Anschließend können wir ein Bild als Cover des Videos festlegen und mit der Wiedergabe warten, bis es geladen ist.

Fügen Sie den folgenden HTML-Code zum Hauptteil Ihrer Seite hinzu. Offensichtlich wird das Tag <video> zum Laden von Videos verwendet, das Attribut „loop“ bezieht sich auf das Schleifen des Videos und „muted“ bezieht sich auf den Stummschaltungsmodus, d. h. die Lautstärke ist 0. #video_cover ist das Standard-Videocover. #overlay ist die Maskenebene, auf der alle anderen Seiteninhalte angezeigt werden.

 <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 implementiert problemlos Vollbild-Videohintergrund – Bideo.js</h1> <p class=sub_head>Eine Javascript-Bibliothek, die der Seite problemlos Vollbild-Hintergrundvideos hinzufügen kann </p> <p class=info>(Warten Sie einen Moment, das Laden des Videos dauert eine Weile.)</p> </div> </section></div>

Wir haben auch #video_controls hinzugefügt, das zur Steuerung der Videowiedergabe und -pause verwendet wird und für Mobiltelefone geeignet ist. Abschließend können Sie im nächsten Abschnitt jeden HTML-Inhalt hinzufügen, den Sie anzeigen möchten.

CSS ist ebenfalls von entscheidender Bedeutung. Die wichtigsten Dinge, auf die man achten sollte, sind die Einstellungen von #container und #background_video. Der folgende CSS-Code kann ohne Erklärung direkt übernommen werden:

 * { margin: 0; padding: 0;} html, body { width: 100 %; : 0; unten: 0; Höhe: 100 %;}#background_video { Position: absolut; links: 50 %; -50 %); Objektanpassung: Höhe: 100 %;}#video_cover { Position: absolute; Höhe: 100 %; Hintergrund: -repeat; Hintergrundgröße: Abdeckung; Hintergrundposition: oben: 0; rgba(0,0,0,0.5);}

Laden Sie zunächst die Bideo-Bibliothek:

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

Instanziieren Sie dann das Bido: new Bideo(), initialisieren Sie dann das Laden direkt und legen Sie die folgenden Optionen fest:

 (function () { var bv = new Bideo(); bv.init({ // Videoelement videoEl: document.querySelector('#background_video'), // Containerelement Container: document.querySelector('body'), / / Adaptive Anpassung resize: true, // autoplay: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), pauseButton: document.querySelector('#pause'), // Laden Sie die Videoquelle und ersetzen Sie Ihre eigene Videoquelldatei entsprechend dem tatsächlichen Geschäft 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', Typ: 'video/mp4' }, { src: 'night.webm', Typ: 'video/webm;codecs=vp8, vorbis' } ], // Sobald das Video geladen ist, wird das Videocover ausgeblendet onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());

Auf diese Weise ist eine hochwertige Hintergrundvideoseite fertiggestellt. Willkommen, um die Online-Demo DEMO anzusehen und den Quellcode herunterzuladen. Weitere Informationen zu Bideo.js finden Sie unter der Github-Projektadresse: https://github.com/rishabhp/bideo.js.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.