In dem vorheriger Teil In diesem Tutorial, das eine Mischung aus HTML5, jQuery und CSS verwendet, haben wir die Barebone-Funktionalität unseres HTML5-gesteuerten Vollbild-Videohintergrunds entwickelt. Dieses Mal werden wir es entwerfen, Fallbacks dafür vorbereiten und verstehen, wie es als Teil Ihrer eigenen Arbeitsdesigns verwendet werden kann. Im heutigen Leitfaden werden wir unser Fullscreen-Video auf verschiedene Arten ergänzen:

  • Erstellen eigener Muster-Overlays, um über unserem Video zu sitzen; wie Scan-Linien im alten Fernseh-Stil, stylen Sie Ihr Video nach Ihrem eigenen Design;
  • Konvertieren Sie unser Video in mehrere Formate, um eine universelle browserübergreifende Unterstützung für Ihren Videohintergrund zu ermöglichen.

Zusammen mit all dem werde ich auch ein Beispiel zeigen, wie das Video kreativ genutzt werden kann, indem man andere Elemente übereinander legt und dir zeigt, wie diese kraftvolle Technik deine eigenen neuen Designs anheizen kann; oder bieten Sie sogar einen neuen, aufregenden Hintergrund für das Design, an dem Sie gerade arbeiten!

Haben Sie Fullscreen-Video als Hintergrund in einem Ihrer Designs verwendet? Haben Sie eine bevorzugte Methode der Implementierung? Lassen Sie es uns in den Kommentaren wissen.