<Video> vs. <OffthreadVideo>
We offer two components for including other videos in your video:
<Video /> and
This page offers a comparison to help you decide which tag to use.
Is based on the native HTML5
<video> element and therefore behaves similar to it.
✅ You can attach a ref and draw the video to a canvas.
✅ Can be rendered without having to be downloaded fully.
✅ Is usually faster to render.
✅ Renders embedded transparent videos quickly.
⛔ 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.
A more sophisticated way of embedding a video, which:
- renders a
<video>tag during preview
- displays the exact frame in an
<Img>tag during rendering, that frame gets extracted using FFMPEG outside the browser
✅ 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)
⛔ The video needs to be downloaded fully before a frame can be rendered.
⛔ No ref can be attached to this element, as it is
<video> during preview but a
<Img/> during render.
⛔ The video cannot be drawn to a canvas.
⛔ Supports embedded transparent videos only if
imageType="png" is set which leads to a performance penalty.