Implementieren Sie eine coole adaptive Hintergrundvideo-Anmeldeseite basierend auf Vue.js 2.0

In diesem Artikel wird beschrieben, wie Sie eine Anmeldeseite mit einem coolen Hintergrundvideo implementieren und sowohl das Hintergrundvideo als auch die Vordergrund-Anmeldekomponente perfekt anpassen können. Das Hintergrundvideo kann das Fenster immer ausfüllen , und die Vordergrundkomponente ist immer zentriert. Der Inhalt des Videos bleibt immer maximal erhalten und es kann der beste visuelle Effekt erzielt werden. Und basierend auf dem Familien-Bucket Vue.js 2.0. Der konkrete Effekt ist im Bild unten dargestellt:

Sie können am Ende des Artikels weiterblättern, um den endgültigen Effekt zu sehen.

1. Bestehende Implementierungsmethode der Hintergrundvideo-Webseite

Im Ausland gibt es eine gute Website „Coverr“, die vollständige Tutorials und Videoressourcen zur Verfügung stellt -End-Entwickler erstellen coole Hintergrundvideo-Homepages. Das Beispiel für den Website-Effekt ist wie folgt:

Das Tutorial lautet wie folgt:

Aus dem Bild und meiner Praxis lassen sich folgende Punkte ableiten:

• Dieses Tutorial verwendet jQuery. Da wir Vue.js nutzen wollen, kann jQuery komplett ersetzt werden.

• Die CSS- und JavaScript-Codes in diesem Tutorial sind zu redundant.

• Führen Sie das Beispiel direkt aus und stellen Sie fest, dass der Effekt nicht gut ist. Wenn das Browserfenster nach Belieben gestreckt wird, kann sich das Hintergrundvideo nicht perfekt anpassen. „Es treten schwarze Ränder und andere Fehler auf.“ und der Effekt ist nicht wie erwartet.

2. Entwerfen Sie eine perfekte Hintergrundvideo-Webseite

Erstellen Sie zunächst ein Projekt mit Vue-Loader basierend auf dem Gerüst-Tool vue-cli. Erstellen Sie im entsprechenden Verzeichnis eine „.vue“-Datei als Vorlagendatei für die Anmeldeseite. Die spezifischen Details werden nicht wiederholt. Der Inhalt dieses Abschnitts ist auf die .vue-Datei beschränkt.

2.1 HTML-Vorlage

Basierend auf den Anforderungen wurde die von Coverr bereitgestellte HTML-Vorlage leicht geändert. Die Ergebnisse sind wie folgt:

<template>
 <p class="homepage-hero-module">
 <p class="video-container">
 <p :style="fixStyle" class="filter"></p>
 <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
 <source src="PATH_TO_MP4" type="video/mp4"/>
 浏览器不支持 video 标签，建议升级浏览器。
 <source src="PATH_TO_WEBM" type="video/webm"/>
 浏览器不支持 video 标签，建议升级浏览器。
 </video>
 <p class="poster hidden" v-if="!vedioCanPlay">
 <img :style="fixStyle" src="PATH_TO_JPEG" alt="">
 </p>
 </p>
 </p>
</template>

In der Vorlage: Das p-Tag der Filterklasse ist eine Maskenebene für das Hintergrundvideo, über die die Helligkeit und Farbtemperatur des Videos gesteuert werden kann. Das

Video-Tag ist ein Standard-HTML5-Tag, das zwei Videoformate und einen Bildplatzhalter bereitstellt. Das Hintergrundvideo wird nach dem Laden automatisch abgespielt.

Die von Coverr bereitgestellte Originalvorlage kann nur Bilder anzeigen, aber keine Videos abspielen. Dieses Problem wird durch die Verwendung der v-if-Direktive von Vue.js gelöst.

2.2 CSS

Der ursprüngliche CSS-Code der Vorlage wurde stark optimiert. Der geänderte CSS-Code lautet wie folgt:

<style scoped>
 .homepage-hero-module,
 .video-container {
 position: relative;
 height: 100vh;
 overflow: hidden;
 }
 .video-container .poster img,
 .video-container video {
 z-index: 0;
 position: absolute;
 }
 .video-container .filter {
 z-index: 1;
 position: absolute;
 background: rgba(0, 0, 0, 0.4);
 }
</style>

Da die meisten Stile global für das Projekt gelten , daher sind dieser Vorlage nur noch drei Stile gewidmet. Die kurze Beschreibung lautet wie folgt:

• Container p füllt das Browserfenster

• Über dem Video befindet sich die Maske p, die als Maske fungiert.

2.3 JavaScript-Code

<script>
 export default {
 name: 'login',
 data() {
 return {
 vedioCanPlay: false,
 fixStyle: ''
 }
 },
 methods: {
 canplay() {
 this.vedioCanPlay = true
 }
 },
 mounted: function() {
 window.onresize = () => {
 const windowWidth = document.body.clientWidth
 const windowHeight = document.body.clientHeight
 const windowAspectRatio = windowHeight / windowWidth
 let videoWidth
 let videoHeight
 if (windowAspectRatio < 0.5625) {
  videoWidth = windowWidth
  videoHeight = videoWidth * 0.5625
  this.fixStyle = {
  height: windowWidth * 0.5625 + &#39;px&#39;,
  width: windowWidth + &#39;px&#39;,
  &#39;margin-bottom&#39;: (windowHeight - videoHeight) / 2 + &#39;px&#39;,
  &#39;margin-left&#39;: &#39;initial&#39;
  }
 } else {
  videoHeight = windowHeight
  videoWidth = videoHeight / 0.5625
  this.fixStyle = {
  height: windowHeight + &#39;px&#39;,
  width: windowHeight / 0.5625 + &#39;px&#39;,
  &#39;margin-left&#39;: (windowWidth - videoWidth) / 2 + &#39;px&#39;,
  &#39;margin-bottom&#39;: &#39;initial&#39;
  }
 }
 }
 window.onresize()
 }
 }
</script>

Der wichtigste Teil des obigen Codes ist die Überwachung des Onresize-Ereignisses des Fensterobjekts. Wenn sich die Fenstergröße ändert, ändert das Programm gleichzeitig die Größe des Videos und des Maskendoms, sodass die schmalste Seite des Videos immer das Browserfenster ausfüllt, während die langen Seiten links und rechts gleichmäßig abgeschnitten werden.

Dadurch wird das Video nicht gestreckt. Die Mitte des Videos bleibt immer in der Mitte des Browsers Das maximale Ausmaß und die besten visuellen Effekte können erzielt werden.

Der endgültige Effekt ist wie folgt:

Verwandte Empfehlungen:

Das WeChat-Applet implementiert das adaptive Breitenverhältnis von Bildkomponenten. Beispiel Teilen

Detailliertes Beispiel für die adaptive Verarbeitung von Javascript, um eine Bilddehnung zu verhindern

So erreichen Sie eine Anpassung der Bildgröße

Das obige ist der detaillierte Inhalt vonImplementieren Sie eine coole adaptive Hintergrundvideo-Anmeldeseite basierend auf Vue.js 2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!