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,
}}
65 MB is too much to use video as a background. You must comply with the following:
Your video must be silent (remove audio)
Use a default image (no matter how small your video is, it will take a few seconds to load and display it)
Delete the video in mobile size
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)