How to speed up loading / playing video in a Next.js / React app?

Question

I have this page in a Next.js site:

https://sendmade-portal-vercel.vercel.app/hu/product/repityke-origami-penztarca

You can feel video loads slowly.

This is how video element is used:

<video
  width="100%"
  autoPlay
  muted
  loop
  playsInline
  style={{
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    zIndex: -1,
  }}
>
  <source
    src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props.urlPrefix}-intro.mp4`}
    type="video/mp4"
  />
</video>

Video is H.264 encoded, and has a 3840 × 2160 resolution. Shall I reduce the resolutiion? Would it help? Do you have any other idea? Said that Next.js does not have video optimization as there is image optimization.

Answer 1

The video is a static asset so you can just convert the mp4 video to webm before serving it. You can also use something like WebRTC if you want to implement streaming, though if the webm size is small enough that won't be necessary.

There is an RFC for next/video for auto webm conversion + streaming but so far doesn't seem like it has been implemented.