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.