[{"data":1,"prerenderedAt":718},["ShallowReactive",2],{"navigation":3,"/components/video-loader":238,"/components/video-loader-surround":713},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":77,"body":240,"description":706,"extension":707,"links":708,"meta":709,"navigation":710,"path":78,"seo":711,"stem":79,"__hash__":712},"docs/03.components/5.video-loader.md",{"type":241,"value":242,"toc":699},"minimark",[243,252,257,310,314,444,448,454,513,517,528,623,627,695],[244,245,246,247,251],"p",{},"Video loader displays a spinner while the video is buffering or loading. It appears automatically when the video enters a waiting state and disappears once playback resumes — no manual control needed. Pass ",[248,249,250],"code",{},"false"," to remove it if you prefer no loading indicator.",[253,254,256],"h2",{"id":255},"config","Config",[258,259,260,276],"table",{},[261,262,263],"thead",{},[264,265,266,270,273],"tr",{},[267,268,269],"th",{},"Property",[267,271,272],{},"Type",[267,274,275],{},"Description",[277,278,279,295],"tbody",{},[264,280,281,287,292],{},[282,283,284],"td",{},[248,285,286],{},"customClasses",[282,288,289],{},[248,290,291],{},"Partial\u003CScenaVideoLoaderComponentClasses>",[282,293,294],{},"Custom CSS classes",[264,296,297,302,307],{},[282,298,299],{},[248,300,301],{},"customStyles",[282,303,304],{},[248,305,306],{},"Partial\u003CScenaVideoLoaderComponentStyles>",[282,308,309],{},"Custom inline styles",[253,311,313],{"id":312},"example","Example",[315,316,321],"pre",{"className":317,"code":318,"language":319,"meta":320,"style":320},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  videoLoader: {\n    customClasses: {\n      root: 'my-loader-wrapper',\n    },\n  },\n});\n","ts","",[248,322,323,350,381,392,402,420,426,432],{"__ignoreMap":320},[324,325,328,332,336,340,344,347],"span",{"class":326,"line":327},"line",1,[324,329,331],{"class":330},"s7zQu","await",[324,333,335],{"class":334},"sTEyZ"," scena",[324,337,339],{"class":338},"sMK4o",".",[324,341,343],{"class":342},"s2Zo4","mount",[324,345,346],{"class":334},"(",[324,348,349],{"class":338},"{\n",[324,351,353,357,360,363,366,368,371,375,378],{"class":326,"line":352},2,[324,354,356],{"class":355},"swJcz","  video",[324,358,359],{"class":338},":",[324,361,362],{"class":338}," {",[324,364,365],{"class":355}," src",[324,367,359],{"class":338},[324,369,370],{"class":338}," '",[324,372,374],{"class":373},"sfazB","/video.mp4",[324,376,377],{"class":338},"'",[324,379,380],{"class":338}," },\n",[324,382,384,387,389],{"class":326,"line":383},3,[324,385,386],{"class":355},"  videoLoader",[324,388,359],{"class":338},[324,390,391],{"class":338}," {\n",[324,393,395,398,400],{"class":326,"line":394},4,[324,396,397],{"class":355},"    customClasses",[324,399,359],{"class":338},[324,401,391],{"class":338},[324,403,405,408,410,412,415,417],{"class":326,"line":404},5,[324,406,407],{"class":355},"      root",[324,409,359],{"class":338},[324,411,370],{"class":338},[324,413,414],{"class":373},"my-loader-wrapper",[324,416,377],{"class":338},[324,418,419],{"class":338},",\n",[324,421,423],{"class":326,"line":422},6,[324,424,425],{"class":338},"    },\n",[324,427,429],{"class":326,"line":428},7,[324,430,431],{"class":338},"  },\n",[324,433,435,438,441],{"class":326,"line":434},8,[324,436,437],{"class":338},"}",[324,439,440],{"class":334},")",[324,442,443],{"class":338},";\n",[253,445,447],{"id":446},"disabling","Disabling",[244,449,450,451,453],{},"Pass ",[248,452,250],{}," to remove the loader. The video will still buffer, but no visual indicator is shown:",[315,455,457],{"className":317,"code":456,"language":319,"meta":320,"style":320},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoLoader: false,\n});\n",[248,458,459,473,493,505],{"__ignoreMap":320},[324,460,461,463,465,467,469,471],{"class":326,"line":327},[324,462,331],{"class":330},[324,464,335],{"class":334},[324,466,339],{"class":338},[324,468,343],{"class":342},[324,470,346],{"class":334},[324,472,349],{"class":338},[324,474,475,477,479,481,483,485,487,489,491],{"class":326,"line":352},[324,476,356],{"class":355},[324,478,359],{"class":338},[324,480,362],{"class":338},[324,482,365],{"class":355},[324,484,359],{"class":338},[324,486,370],{"class":338},[324,488,374],{"class":373},[324,490,377],{"class":338},[324,492,380],{"class":338},[324,494,495,497,499,503],{"class":326,"line":383},[324,496,386],{"class":355},[324,498,359],{"class":338},[324,500,502],{"class":501},"sfNiH"," false",[324,504,419],{"class":338},[324,506,507,509,511],{"class":326,"line":394},[324,508,437],{"class":338},[324,510,440],{"class":334},[324,512,443],{"class":338},[253,514,516],{"id":515},"customization","Customization",[244,518,519,520,523,524,527],{},"The loader accepts ",[248,521,522],{},"root"," and ",[248,525,526],{},"loader"," as target keys:",[315,529,531],{"className":317,"code":530,"language":319,"meta":320,"style":320},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoLoader: {\n    customStyles: {\n      loader: { borderColor: 'rgba(255, 255, 255, 0.3)' },\n    },\n  },\n});\n",[248,532,533,547,567,575,584,607,611,615],{"__ignoreMap":320},[324,534,535,537,539,541,543,545],{"class":326,"line":327},[324,536,331],{"class":330},[324,538,335],{"class":334},[324,540,339],{"class":338},[324,542,343],{"class":342},[324,544,346],{"class":334},[324,546,349],{"class":338},[324,548,549,551,553,555,557,559,561,563,565],{"class":326,"line":352},[324,550,356],{"class":355},[324,552,359],{"class":338},[324,554,362],{"class":338},[324,556,365],{"class":355},[324,558,359],{"class":338},[324,560,370],{"class":338},[324,562,374],{"class":373},[324,564,377],{"class":338},[324,566,380],{"class":338},[324,568,569,571,573],{"class":326,"line":383},[324,570,386],{"class":355},[324,572,359],{"class":338},[324,574,391],{"class":338},[324,576,577,580,582],{"class":326,"line":394},[324,578,579],{"class":355},"    customStyles",[324,581,359],{"class":338},[324,583,391],{"class":338},[324,585,586,589,591,593,596,598,600,603,605],{"class":326,"line":404},[324,587,588],{"class":355},"      loader",[324,590,359],{"class":338},[324,592,362],{"class":338},[324,594,595],{"class":355}," borderColor",[324,597,359],{"class":338},[324,599,370],{"class":338},[324,601,602],{"class":373},"rgba(255, 255, 255, 0.3)",[324,604,377],{"class":338},[324,606,380],{"class":338},[324,608,609],{"class":326,"line":422},[324,610,425],{"class":338},[324,612,613],{"class":326,"line":428},[324,614,431],{"class":338},[324,616,617,619,621],{"class":326,"line":434},[324,618,437],{"class":338},[324,620,440],{"class":334},[324,622,443],{"class":338},[253,624,626],{"id":625},"interface","Interface",[315,628,630],{"className":317,"code":629,"language":319,"meta":320,"style":320},"interface ScenaVideoLoaderProps {\n  size: ComponentSize;\n  customClasses: Partial\u003CScenaVideoLoaderComponentClasses>;\n  customStyles: Partial\u003CScenaVideoLoaderComponentStyles>;\n}\n",[248,631,632,643,655,674,690],{"__ignoreMap":320},[324,633,634,637,641],{"class":326,"line":327},[324,635,625],{"class":636},"spNyl",[324,638,640],{"class":639},"sBMFI"," ScenaVideoLoaderProps",[324,642,391],{"class":338},[324,644,645,648,650,653],{"class":326,"line":352},[324,646,647],{"class":355},"  size",[324,649,359],{"class":338},[324,651,652],{"class":639}," ComponentSize",[324,654,443],{"class":338},[324,656,657,660,662,665,668,671],{"class":326,"line":383},[324,658,659],{"class":355},"  customClasses",[324,661,359],{"class":338},[324,663,664],{"class":639}," Partial",[324,666,667],{"class":338},"\u003C",[324,669,670],{"class":639},"ScenaVideoLoaderComponentClasses",[324,672,673],{"class":338},">;\n",[324,675,676,679,681,683,685,688],{"class":326,"line":394},[324,677,678],{"class":355},"  customStyles",[324,680,359],{"class":338},[324,682,664],{"class":639},[324,684,667],{"class":338},[324,686,687],{"class":639},"ScenaVideoLoaderComponentStyles",[324,689,673],{"class":338},[324,691,692],{"class":326,"line":404},[324,693,694],{"class":338},"}\n",[696,697,698],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":320,"searchDepth":327,"depth":352,"links":700},[701,702,703,704,705],{"id":255,"depth":352,"text":256},{"id":312,"depth":352,"text":313},{"id":446,"depth":352,"text":447},{"id":515,"depth":352,"text":516},{"id":625,"depth":352,"text":626},"Configure or disable the loading indicator shown during video buffering.","md",null,{},true,{"title":77,"description":706},"0TCo2_EZew1JqZc-DbjArBCYia7lYNsXRe74dXTDdS0",[714,716],{"title":73,"path":74,"stem":75,"description":715,"children":-1},"Configure or disable the playback control panel (play, pause, etc.).",{"title":81,"path":82,"stem":83,"description":717,"children":-1},"Configure or disable the video progress bar.",1777984320951]