PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”, please see: Spring Festival Creative Submission Contest”

preface

The Spring Festival is coming, as the author of the shovel excretion officer, decided to dedicate their own strength for this New Year, play their own expertise, for everyone a good luck page, chat table mind, I wish everyone a happy New Year duck ~ ~ ~

content

This page looks like this

The original is PSD found on the Internet, the author has processed, we can split the page, divided into: lanterns, doors, background, the year of the Tiger, small brain axe, trees and the bottom of the pattern and fireworks explosion 💥.

In order to produce the page quickly, the author directly uses a technical selection of open source static page: Gatsby. Js.

This technical solution is a static web page system built based on React. The default graphQl is used for data exchange. The underlying architect React has all the convenient operations of React, which can easily abstract components and extend part of the ecology. It’s not very complicated.

This time the page is simpler, so let’s start from scratch and pull an item.

First, we need to install a Gatsby – CLI on the computer (get right to the point, our goal is to quickly copy the page)

npm install -g gatsby-cli
Copy the code

Then create a Gatsby project

gatsby new happy-year

cd happy-year

npm install || yarm install
Copy the code

So the project is running, and when it’s running, it looks like this

Then we clean up the project, leaving only index.js in SRC/Pages (the core request is to remove unnecessary files, the implementer is free to leave a page), and the file is as follows

The following two problems are mainly focused on the Video part. One is how to make an MP4 with a black background transparent and display it on the page in a style. The other is how to play the Video automatically.

Let’s solve the first problem: the mp4 on a black background is displayed as an effect on the page

First we need to put a video TAB in the page, set the video size to full screen. Second, use two CSS styles mix-Blending-mode, object-Fit blend mode and screen size Settings

// HTML
    <video
        width="100%"
        height="100%"
        muted
        controls={false}
        autoplay={true}
        loop={true}
        ref={video}
      >
      <source src={fire} type="video/mp4" />
    </video>
    
    // CSS
    video {
      mix-blend-mode: screen;
      object-fit: fill;
    }
Copy the code

The second is the processing of automatic Video playing. As we all know, Video playing is always “Schrodinger’s play”. We often meet the situation that autoplay is added but does not play.

const video = React.useRef()
  if (video.current) {
    const promise = video.current.play()
    if(promise ! = =undefined) {
      promise
        .catch(error= > {
          // Auto-play was prevented
          // Show a UI element to let the user manually start playback
        })
        .then(() = > {
          // Auto-play started}}})Copy the code

As you can see, we are using useRef, also remember to add ref to the video tag

Other processing is almost not very complicated, resources are placed below, you need to help yourself, creation is not easy, but also please don’t be stingy hands to help the author a little praise oh, than heart ~

A question! Big guy pat, can comment area give advice.

Github access address ps: code is the complete code oh ~