Skip to main content

<Video> vs. <OffthreadVideo>

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.

<Video />​

Is based on the native HTML5 <video> element and therefore behaves similar to it.

Pros

✅   You can attach a ref and draw the video to a canvas.
✅   Can be rendered without having to be downloaded fully (only if you don't need audio and pass muted).
✅   Renders embedded transparent videos quickly.

Cons

⛔   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.

<OffthreadVideo />​

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

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, as it is <video> during preview but a <Img/> during render.
⛔   Does not natively support the loop attribute. Checkout looping an offthread video for more info.
⛔   The video cannot be drawn to a canvas.
⛔   Supports embedded transparent videos only if transparent is set which leads to a performance penalty.

Prefer <OffthreadVideo /> whenever possible.