How make middle size video watching painless in website?-CodePudding

I have a 63MB video in my website. It should start to play right after opening the site, but instead of it, it hung up for 20-30 sec.

I have choose the minimal resolution 720p, H-264 encoding. What elso I can do increase user experience?

You can see here the loading time:

https://sendmade-portal-vercel.vercel.app/hu/product/zer-jewel-rez-gyertyatarto

This is how video is used:

<video
  ref={videoRef}
  width="100%"
  muted
  loop
  playsInline
  controls={props.isControlsVisible == true}
  autoPlay={props.isAutoplay == true}
  style={{
    width: "100%",
    height: "auto",
    zIndex: -1,
  }}

CodePudding user response：

65 MB is too much to use video as a background. You must comply with the following:

1- Your video must be silent (remove audio)

2- Use a default image (no matter how small your video is, it will take a few seconds to load and display it)

3- Delete the video in mobile size

4- Your video should be short (based on experience, the best offer is a 10 - 20 seconds)

You can use the HandBrake program (it is free) to reduce the video size with minimal quality reduction. In the test, your video size was reduced to 7 MB (I use Very Fast 720p30 option and in video tab select 24FPS)