Is based on the native HTML5
<video> element and therefore behaves similar to it.
⛔ 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).
✅ Is usually faster to render.
⛔ 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
transparent is set which leads to a performance penalty.
<OffthreadVideo /> whenever possible.