I forrige del af denne tutorial, ved hjælp af en blanding af HTML5, jQuery og CSS, konstruerede vi barebones-funktionaliteten af ​​vores HTML5-drevne fuldskærms videobaggrund. Denne gang skal vi styling det, forberede tilbagesendelser til det og forstå, hvordan det kan bruges som en del af dine egne arbejdsdesigner. I dagens vejledning tilføjer vi vores fullscreen-video på en række måder, herunder:

  • skabe vores egne mønster overlays at sidde over toppen af ​​vores video; som f.eks. gammeldags scanlinier, styler din video, så den passer til dit eget design;
  • konverterer vores video til flere formater for at muliggøre universel understøttelse af browseren til din videobaggrund.

Sammen med alt dette vil jeg også vise et eksempel på hvordan videoen kan bruges kreativt ved at lægge andre elementer over toppen af ​​det og vise dig, hvordan denne kraftfulde teknik kan brænde dine egne nye designs; eller endda give en ny, spændende baggrund for det design, du arbejder i øjeblikket på!

Har du brugt fuldscreen video som baggrund i et af dine designs? Har du en foretrukken implementeringsmetode? Lad os vide i kommentarerne.