<OffthreadVideo> vs. <Video>
We offer two components for including other videos in your video: <Video /> and <OffthreadVideo />.
This page offers a comparison to help you decide which tag to use.
<OffthreadVideo />
Prefer <OffthreadVideo /> whenever possible.
A more sophisticated way of embedding a video, which:
- During preview: renders a HTML5
<video>tag. - While rendering: Extracts the exact frame outside the browser and displays it in an
<Img>tag.
Pros
✅ More videos can be displayed simulatenously as Chrome will not apply throttling.
✅ No flickers or duplicate frames in the output video can occur.
✅ Supports more codecs such as ProRes (only during render-time).
✅ Is usually faster to render.
Cons
⛔ The video needs to be downloaded fully before a frame can be rendered.
⛔ No ref can be attached to this element.
⛔ More work is required to loop a video. Check out: Looping an <Offthread> video.
⛔ Supports transparent videos only if the transparent is set which is a bit slower.
<Video />
Is based on the native HTML5 <video> element and therefore behaves similar to it.
Pros
✅ Can render a video without having it to be downloaded fully (if you don't pass the muted prop, the video will still be downloaded fully to extract its audio).
✅ You can attach a ref to the <video> element.
Cons
⛔ Fewer codecs are supported.
⛔ Chrome may throttle video tags if the page is heavy.
⛔ If too many video tags get rendered simultaneously, a timeout may occur.
⛔ If the input video framerate does not match with the output framerate, some duplicate frames may occur in the output.
⛔ A Google Chrome build with proprietary codecs is required.