"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[4250],{1592:(e,t,r)=>{r.r(t),r.d(t,{MDXContext:()=>p,MDXProvider:()=>c,mdx:()=>v,useMDXComponents:()=>s,withMDXComponents:()=>l});var n=r(86248);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(){return a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a.apply(this,arguments)}function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var p=n.createContext({}),l=function(e){return function(t){var r=s(t.components);return n.createElement(e,a({},t,{components:r}))}},s=function(e){var t=n.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=s(e.components);return n.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,d=e.parentName,p=m(e,["components","mdxType","originalType","parentName"]),l=s(r),c=o,f=l["".concat(d,".").concat(c)]||l[c]||u[c]||a;return r?n.createElement(f,i(i({ref:t},p),{},{components:r})):n.createElement(f,i({ref:t},p))}));function v(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,d=new Array(a);d[0]=f;var i={};for(var m in t)hasOwnProperty.call(t,m)&&(i[m]=t[m]);i.originalType=e,i.mdxType="string"==typeof e?e:o,d[1]=i;for(var p=2;p<a;p++)d[p]=r[p];return n.createElement.apply(null,d)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"},32203:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>m,default:()=>u,frontMatter:()=>i,metadata:()=>p,toc:()=>s});var n=r(87998),o=r(96438),a=(r(86248),r(1592)),d=["components"],i={id:"video-vs-offthreadvideo",title:"<Video> vs. <OffthreadVideo>"},m=void 0,p={unversionedId:"video-vs-offthreadvideo",id:"video-vs-offthreadvideo",title:"<Video> vs. <OffthreadVideo>",description:"We offer two components for including other videos in your video: ` and `.",source:"@site/docs/video-vs-offthreadvideo.md",sourceDirName:".",slug:"/video-vs-offthreadvideo",permalink:"/docs/video-vs-offthreadvideo",draft:!1,editUrl:"https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/video-vs-offthreadvideo.md",tags:[],version:"current",frontMatter:{id:"video-vs-offthreadvideo",title:"<Video> vs. <OffthreadVideo>"},sidebar:"mainSidebar",previous:{title:"Chromium flags",permalink:"/docs/chromium-flags"},next:{title:"Testing prereleases",permalink:"/docs/prereleases"}},l={},s=[{value:"<code>&lt;Video /&gt;</code>",id:"video-",level:2},{value:"<code>&lt;OffthreadVideo /&gt;</code>",id:"offthreadvideo-",level:2}],c={toc:s};function u(e){var t=e.components,r=(0,o.default)(e,d);return(0,a.mdx)("wrapper",(0,n.default)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,a.mdx)("p",null,"We offer two components for including other videos in your video: ",(0,a.mdx)("a",{parentName:"p",href:"/docs/video"},(0,a.mdx)("inlineCode",{parentName:"a"},"<Video />"))," and ",(0,a.mdx)("a",{parentName:"p",href:"/docs/offthreadvideo"},(0,a.mdx)("inlineCode",{parentName:"a"},"<OffthreadVideo />")),".\nThis page offers a comparison to help you decide which tag to use."),(0,a.mdx)("h2",{id:"video-"},(0,a.mdx)("a",{parentName:"h2",href:"/docs/video"},(0,a.mdx)("inlineCode",{parentName:"a"},"<Video />"))),(0,a.mdx)("p",null,"Is based on the native HTML5 ",(0,a.mdx)("inlineCode",{parentName:"p"},"<video>")," element and therefore behaves similar to it."),(0,a.mdx)("p",null,(0,a.mdx)("strong",{parentName:"p"},"Pros")),(0,a.mdx)("p",null,"\u2705 ","\xa0"," You can attach a ref and ",(0,a.mdx)("a",{parentName:"p",href:"/docs/video-manipulation"},"draw the video to a canvas"),".",(0,a.mdx)("br",{parentName:"p"}),"\n","\u2705 ","\xa0"," Can be rendered without having to be downloaded fully.",(0,a.mdx)("br",{parentName:"p"}),"\n","\u2705 ","\xa0"," Is usually faster to render."),(0,a.mdx)("p",null,(0,a.mdx)("strong",{parentName:"p"},"Cons")),(0,a.mdx)("p",null,"\u26d4 ","\xa0"," Chrome may throttle video tags if the page is heavy.",(0,a.mdx)("br",{parentName:"p"}),"\n","\u26d4 ","\xa0"," If too many video tags get rendered simultaneously, a timeout may occur.",(0,a.mdx)("br",{parentName:"p"}),"\n","\u26d4 ","\xa0"," If the input video framerate does not match with the output framerate, some duplicate frames may occur in the output.",(0,a.mdx)("br",{parentName:"p"}),"\n","\u26d4 ","\xa0"," A Google Chrome build with proprietary codecs is required."),(0,a.mdx)("h2",{id:"offthreadvideo-"},(0,a.mdx)("a",{parentName:"h2",href:"/docs/offthreadvideo"},(0,a.mdx)("inlineCode",{parentName:"a"},"<OffthreadVideo />"))),(0,a.mdx)("p",null,"A more sophisticated way of embedding a video, which:"),(0,a.mdx)("ul",null,(0,a.mdx)("li",{parentName:"ul"},"renders a ",(0,a.mdx)("inlineCode",{parentName:"li"},"<video>")," tag during preview"),(0,a.mdx)("li",{parentName:"ul"},"displays the exact frame in an ",(0,a.mdx)("a",{parentName:"li",href:"/docs/img"},(0,a.mdx)("inlineCode",{parentName:"a"},"<Img>"))," tag during rendering, that frame gets extracted using FFMPEG outside the browser")),(0,a.mdx)("p",null,(0,a.mdx)("strong",{parentName:"p"},"Pros")),(0,a.mdx)("p",null,"\u2705 ","\xa0"," More videos can be displayed simulatenously as Chrome will not apply throttling",(0,a.mdx)("br",{parentName:"p"}),"\n","\u2705 ","\xa0"," No flickers or duplicate frames in the output video can occur.\n\u2705 ","\xa0"," Supports more codecs such as ProRes (only during render-time)"),(0,a.mdx)("p",null,(0,a.mdx)("strong",{parentName:"p"},"Cons")),(0,a.mdx)("p",null,"\u26d4 ","\xa0"," The video needs to be downloaded fully before a frame can be rendered.",(0,a.mdx)("br",{parentName:"p"}),"\n","\u26d4 ","\xa0"," No ref can be attached to this element, as it is ",(0,a.mdx)("inlineCode",{parentName:"p"},"<video>")," during preview but a ",(0,a.mdx)("inlineCode",{parentName:"p"},"<Img/>")," during render.",(0,a.mdx)("br",{parentName:"p"}),"\n","\u26d4 ","\xa0"," The video cannot be drawn to a canvas."))}u.isMDXComponent=!0}}]);