So erstellen Sie einen Vollbild-Video-Hintergrund mit HTML5 Video
Zum Glück für uns, Medien einen großen Schub ins Rampenlicht als native HTML5 machen. Wir haben jetzt eine Vielzahl von verschiedenen Medientypen zur Verfügung, einschließlich Videos.
HTML5 Video Heute
HTML5-Video-Kompatibilität ist wirklich hoch. In der Tat ist es in allen modernen Browsern (> IE8) unterstützt. Das Innenleben von Video im Allgemeinen kann kompliziert sein, besonders wenn man in verschiedene Formate zu graben beginnen, Spuren, Container und die Arbeiten.
Ich erspare Ihnen die Änderung für dieses Tutorial, aber ich schlage vor, ein nachlesen zu diesem Artikel nehme ich vor einiger Zeit schrieb. Was Sie wissen sollten, ist, dass, wenn Sie Video im Web sind Implementierung, die Sie benötigen drei Formate hosten:
Um Ihre Video-Formate in Schach zu bekommen, schlage ich das robuste ffmpeg-Tool. Wenn Sie gerade jetzt spielen, um möchten, dann mp4-Formate sollte es tun.
Video in Ihrem HTML5-Dokument zu verwenden ist so einfach wie folgt aus:
Wenn der Browser kein Video überhaupt unterstützt wird es nur den Quell-Tags ignorieren und auf dem Platzhalter Text aufzunehmen. Okay, genug der Theorie. Lassen Sie uns eingraben.
Einrichten Unsere HTML
Stellen wir uns vor, dass wir eine Seite mit einem Vollbild-Hintergrund-Video erstellen möchten. Sagen wir, es ist eine Zielseite für Ihr neues Produkt, so über das Video, wir einige Überschrift Text möchten, einige Untertext und ein Aufruf zum Handeln Taste. Ziemlich einfach Sachen richtig? Naja fast.
Wir können nicht ganz haben nur einen Behälter mit einem Hintergrundvideo in CSS und den Text innerhalb dieser Behälter. CSS erlaubt es nicht für Video.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam, fugiat minus aliquam quisquam hic repudiandae nobis Architecto ipsa numquam facilis nisi!
Zur Festlegung der CSS Basis
Weil wir nur ein paar Elemente in dieser Demo verwenden, ich werde kein CSS-Reset oder normaliser verwenden. Lassen Sie uns einfach unsere eigenen aufzuschreiben:
Hinzu kommt, dass, lassen Sie sich von der Standardschriftart loszuwerden, und Sauerstoff aus Google Fonts enthalten.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam, fugiat minus aliquam quisquam hic repudiandae nobis Architecto ipsa numquam facilis nisi!
Denken Sie daran, wir sind interessiert an einem Vollbild-Video und Bildfenster, also müssen wir sicherstellen, dass unsere HTML-und Körperelemente Vollbild sind. Unsere Basis CSS sollte nun wie folgt aussehen:
Okay, lasst uns weitermachen!
Layering Unsere Content
Wir wissen, dass wir wollen, dass unsere Inhalte geschichtet, und das bedeutet, dass wir z-Indizierung nutzen müssen. Unsere Inhalte selbst werden in dem normalen Ablauf des HTML existieren, aber unser Video wird fest bleiben und im Hintergrund. Lassen Sie uns damit anfangen:
Lassen Sie uns ein wenig mehr Stil zu unserem Inhalt hinzufügen, so dass wir darüber und konzentrieren sich auf unser Video vergessen. Wir werden das Überschrift groß und fett machen, und die Taste ein wenig zu Stil. Ich werde nur einige Augapfel mittelt, um den Inhalt vertikal zentriert zu bekommen, aber es gibt auch andere Tricks (wie wir sehen werden später). Hier ist, was ich kam mit:
Ziemlich einfach Sachen, aber zumindest jetzt gibt es einige visuelle Attraktivität, die es etwas einfacher für uns macht zu arbeiten. Jetzt haben wir ein bisschen ein Problem mit unserem Video. Im Moment ist es nur an der oberen linken Ecke des Bildschirms festgesteckt, und wenn Sie auf einem größeren Bildschirm sind, ist es wahrscheinlich nicht die gesamten verfügbaren Platz einnimmt. Lassen Sie uns das ansehen.
Zentrieren - Full-Screening Das Video
(Oder festes) positioniertes Element relativ zu seinem Container Es gibt einen netten kleinen Trick, um diese Tage schwimmend ein perfektes vertikales Zentrum eines absolut zu halten. Es nutzt oben und transformiert. Die Übersetzung von einem Element durch einen Prozentwert wird auf der Basis der Elemente Dimensionen berechnet.
Wenn wir also etwas 50% von der Oberseite eines Behälter schubsen, dann übersetzen sie ein negatives 50% sichern, wird es perfekt zentriert sein. Das lässt uns mit diesem:
Nun, was Full-Screening oder? Nun müssen wir zwingen, dass mit einem wenig CSS wieder, mit minimalen Breiten und Höhen. Hier ist die vollständige CSS für das Video:
Jetzt haben wir ein Vollbild-Video im Hintergrund! Aber warten Sie eine Sekunde ... es ist nicht einmal zu spielen. Lassen Sie uns das jetzt behandeln.
Steuerung der Video
Es gibt eine Vielzahl von Attributen zur Verfügung, und Sie können sie alle hier sehen. Wir sind daran interessiert sind nur in drei von ihnen, aber zur Kenntnis nehmen, dass standardmäßig werden die Steuerelemente aus dem Blick verborgen. Weil wir versuchen, etwas zu erreichen, die rein ästhetisch ansprechend ist, werden wir es auf diese Weise halten. Die anderen drei Eigenschaften, die wir daran interessiert sind, sind:
- Autoplay - wenn angegeben wird, wird das Video automatisch beginnen zu spielen
- stumm geschaltet - zeigt die Standardeinstellung der Audiodaten im Video enthaltenen
- Schleife - falls angegeben, werden wir, auf das Ende des Videos erreicht, suchen automatisch zurück an den Start
Automatische Wiedergabe ist wichtig, weil wir die Kontrollen in erster Linie versteckt sind, und wir wollen das Video tatsächlich spielen. Gedämpfte ist auch wichtig, und hier ist der Grund. Es ist schon ein wenig aufdringlich, ein Video zu übertrumpfen und kein Benutzer erlauben, sie zu pausieren oder zu stoppen. Aber wir können uns ein wenig entschuldigen, denn es ist alles im Namen des ästhetischen Wertes.
Wenn wir jedoch ein Video Auto-Spiele sind, wollen wir auf jeden Fall es standardmäßig stumm zu schalten. Schließlich gibt es noch die Schleife Attribut. Das ist nicht wirklich wichtig, so zu sprechen, aber nur wissen, dass, wenn Sie einen Looping Video-Clips ist, dann ist dieses Attribut kümmert sich so leicht. Lassen Sie sich diese drei Attribute zu unserem Video hinzufügen:
Hit Refresh im Browser, und voila! Du bist alles getan, und es sieht schön aus.
Überlegungen - Taking It Weitere
- canplay - gesendet, wenn genügend Daten zur Verfügung stehen, dass die Medien, zumindest für ein paar Frames abgespielt werden können
- canplaythrough - gesendet, wenn die Bereitschaftszustandsänderungen ... darauf hinweisen, dass die gesamten Medien ohne Unterbrechung abgespielt werden können
Ziemlich raffiniert, nicht wahr?
Jetzt ist es sehr wichtig zu beachten, dass die Medien Ereignisse und Methoden sind sehr modern Sachen, und Browser-Unterstützung ist in dem ganzen Ort verstreut. Aber bewusst sein, all dies aber, weil es hier zu bleiben, und wird nur noch mehr in der Zukunft unterstützt werden.
Vorerst aber stellen Sie sicher, dass Sie die erforderlichen Kontrollen einrichten für verschiedene Browser haben, wenn das, was zu verwenden, und wenn die JS oben auf alle Schnipsel enthalten. Ah, das moderne Web.
Mit nur ein wenig Verständnis, CSS Tricks und Experimenten konnten wir einen visuell beeindruckenden Effekte erzeugen.
Über den Autor Nick Salloum
großer Artikel half mir wirklich heraus. Haben allerdings eine Frage. Ich bemerkte ich das Video nicht auf dem Netzwerk sehen, wenn ich die Seite neu zu laden, wie kommt es nicht um das Video Laden nicht zeigen noch die Größe des Videos in devtools?