[{"data":1,"prerenderedAt":808},["ShallowReactive",2],{"navigation":3,"/components/video-controls":238,"/components/video-controls-surround":803},[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":73,"body":240,"description":796,"extension":797,"links":798,"meta":799,"navigation":800,"path":74,"seo":801,"stem":75,"__hash__":802},"docs/03.components/4.video-controls.md",{"type":241,"value":242,"toc":789},"minimark",[243,247,252,321,325,332,499,503,508,568,572,587,697,701,785],[244,245,246],"p",{},"Video controls render a play/pause overlay on top of the video container. The overlay appears when the user hovers over the widget and fades out automatically — clicking it toggles playback.",[248,249,251],"h2",{"id":250},"config","Config",[253,254,255,271],"table",{},[256,257,258],"thead",{},[259,260,261,265,268],"tr",{},[262,263,264],"th",{},"Property",[262,266,267],{},"Type",[262,269,270],{},"Description",[272,273,274,291,306],"tbody",{},[259,275,276,283,288],{},[277,278,279],"td",{},[280,281,282],"code",{},"aria",[277,284,285],{},[280,286,287],{},"Partial\u003CScenaVideoControlsComponentAria>",[277,289,290],{},"ARIA attributes",[259,292,293,298,303],{},[277,294,295],{},[280,296,297],{},"customClasses",[277,299,300],{},[280,301,302],{},"Partial\u003CScenaVideoControlsComponentClasses>",[277,304,305],{},"Custom CSS classes",[259,307,308,313,318],{},[277,309,310],{},[280,311,312],{},"customStyles",[277,314,315],{},[280,316,317],{},"Partial\u003CScenaVideoControlsComponentStyles>",[277,319,320],{},"Custom inline styles",[248,322,324],{"id":323},"example","Example",[326,327,328],"scena-container",{},[329,330],"scena-component",{":config":331},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[333,334,339],"pre",{"className":335,"code":336,"language":337,"meta":338,"style":338},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  videoControls: {\n    aria: {\n      play: { 'aria-label': 'Play video' },\n      pause: { 'aria-label': 'Pause video' },\n    },\n  },\n});\n","ts","",[280,340,341,368,399,410,420,448,475,481,487],{"__ignoreMap":338},[342,343,346,350,354,358,362,365],"span",{"class":344,"line":345},"line",1,[342,347,349],{"class":348},"s7zQu","await",[342,351,353],{"class":352},"sTEyZ"," scena",[342,355,357],{"class":356},"sMK4o",".",[342,359,361],{"class":360},"s2Zo4","mount",[342,363,364],{"class":352},"(",[342,366,367],{"class":356},"{\n",[342,369,371,375,378,381,384,386,389,393,396],{"class":344,"line":370},2,[342,372,374],{"class":373},"swJcz","  video",[342,376,377],{"class":356},":",[342,379,380],{"class":356}," {",[342,382,383],{"class":373}," src",[342,385,377],{"class":356},[342,387,388],{"class":356}," '",[342,390,392],{"class":391},"sfazB","/video.mp4",[342,394,395],{"class":356},"'",[342,397,398],{"class":356}," },\n",[342,400,402,405,407],{"class":344,"line":401},3,[342,403,404],{"class":373},"  videoControls",[342,406,377],{"class":356},[342,408,409],{"class":356}," {\n",[342,411,413,416,418],{"class":344,"line":412},4,[342,414,415],{"class":373},"    aria",[342,417,377],{"class":356},[342,419,409],{"class":356},[342,421,423,426,428,430,432,435,437,439,441,444,446],{"class":344,"line":422},5,[342,424,425],{"class":373},"      play",[342,427,377],{"class":356},[342,429,380],{"class":356},[342,431,388],{"class":356},[342,433,434],{"class":373},"aria-label",[342,436,395],{"class":356},[342,438,377],{"class":356},[342,440,388],{"class":356},[342,442,443],{"class":391},"Play video",[342,445,395],{"class":356},[342,447,398],{"class":356},[342,449,451,454,456,458,460,462,464,466,468,471,473],{"class":344,"line":450},6,[342,452,453],{"class":373},"      pause",[342,455,377],{"class":356},[342,457,380],{"class":356},[342,459,388],{"class":356},[342,461,434],{"class":373},[342,463,395],{"class":356},[342,465,377],{"class":356},[342,467,388],{"class":356},[342,469,470],{"class":391},"Pause video",[342,472,395],{"class":356},[342,474,398],{"class":356},[342,476,478],{"class":344,"line":477},7,[342,479,480],{"class":356},"    },\n",[342,482,484],{"class":344,"line":483},8,[342,485,486],{"class":356},"  },\n",[342,488,490,493,496],{"class":344,"line":489},9,[342,491,492],{"class":356},"}",[342,494,495],{"class":352},")",[342,497,498],{"class":356},";\n",[248,500,502],{"id":501},"disabling","Disabling",[326,504,505],{},[329,506],{":config":507},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"videoControls\":false,\"ctaButton\":false,\"closeButton\":false}",[333,509,511],{"className":335,"code":510,"language":337,"meta":338,"style":338},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoControls: false,\n});\n",[280,512,513,527,547,560],{"__ignoreMap":338},[342,514,515,517,519,521,523,525],{"class":344,"line":345},[342,516,349],{"class":348},[342,518,353],{"class":352},[342,520,357],{"class":356},[342,522,361],{"class":360},[342,524,364],{"class":352},[342,526,367],{"class":356},[342,528,529,531,533,535,537,539,541,543,545],{"class":344,"line":370},[342,530,374],{"class":373},[342,532,377],{"class":356},[342,534,380],{"class":356},[342,536,383],{"class":373},[342,538,377],{"class":356},[342,540,388],{"class":356},[342,542,392],{"class":391},[342,544,395],{"class":356},[342,546,398],{"class":356},[342,548,549,551,553,557],{"class":344,"line":401},[342,550,404],{"class":373},[342,552,377],{"class":356},[342,554,556],{"class":555},"sfNiH"," false",[342,558,559],{"class":356},",\n",[342,561,562,564,566],{"class":344,"line":412},[342,563,492],{"class":356},[342,565,495],{"class":352},[342,567,498],{"class":356},[248,569,571],{"id":570},"customization","Customization",[244,573,574,575,578,579,582,583,586],{},"The controls accept ",[280,576,577],{},"root",", ",[280,580,581],{},"play",", and ",[280,584,585],{},"pause"," as target keys:",[333,588,590],{"className":335,"code":589,"language":337,"meta":338,"style":338},"await scena.mount({\n  video: { src: '/video.mp4' },\n  videoControls: {\n    customClasses: {\n      root: 'my-controls',\n      play: { icon: 'text-white' },\n    },\n  },\n});\n",[280,591,592,606,626,634,643,659,681,685,689],{"__ignoreMap":338},[342,593,594,596,598,600,602,604],{"class":344,"line":345},[342,595,349],{"class":348},[342,597,353],{"class":352},[342,599,357],{"class":356},[342,601,361],{"class":360},[342,603,364],{"class":352},[342,605,367],{"class":356},[342,607,608,610,612,614,616,618,620,622,624],{"class":344,"line":370},[342,609,374],{"class":373},[342,611,377],{"class":356},[342,613,380],{"class":356},[342,615,383],{"class":373},[342,617,377],{"class":356},[342,619,388],{"class":356},[342,621,392],{"class":391},[342,623,395],{"class":356},[342,625,398],{"class":356},[342,627,628,630,632],{"class":344,"line":401},[342,629,404],{"class":373},[342,631,377],{"class":356},[342,633,409],{"class":356},[342,635,636,639,641],{"class":344,"line":412},[342,637,638],{"class":373},"    customClasses",[342,640,377],{"class":356},[342,642,409],{"class":356},[342,644,645,648,650,652,655,657],{"class":344,"line":422},[342,646,647],{"class":373},"      root",[342,649,377],{"class":356},[342,651,388],{"class":356},[342,653,654],{"class":391},"my-controls",[342,656,395],{"class":356},[342,658,559],{"class":356},[342,660,661,663,665,667,670,672,674,677,679],{"class":344,"line":450},[342,662,425],{"class":373},[342,664,377],{"class":356},[342,666,380],{"class":356},[342,668,669],{"class":373}," icon",[342,671,377],{"class":356},[342,673,388],{"class":356},[342,675,676],{"class":391},"text-white",[342,678,395],{"class":356},[342,680,398],{"class":356},[342,682,683],{"class":344,"line":477},[342,684,480],{"class":356},[342,686,687],{"class":344,"line":483},[342,688,486],{"class":356},[342,690,691,693,695],{"class":344,"line":489},[342,692,492],{"class":356},[342,694,495],{"class":352},[342,696,498],{"class":356},[248,698,700],{"id":699},"interface","Interface",[333,702,704],{"className":335,"code":703,"language":337,"meta":338,"style":338},"interface ScenaVideoControlsProps {\n  size: ComponentSize;\n  aria: Partial\u003CScenaVideoControlsComponentAria>;\n  customClasses: Partial\u003CScenaVideoControlsComponentClasses>;\n  customStyles: Partial\u003CScenaVideoControlsComponentStyles>;\n}\n",[280,705,706,717,729,748,764,780],{"__ignoreMap":338},[342,707,708,711,715],{"class":344,"line":345},[342,709,699],{"class":710},"spNyl",[342,712,714],{"class":713},"sBMFI"," ScenaVideoControlsProps",[342,716,409],{"class":356},[342,718,719,722,724,727],{"class":344,"line":370},[342,720,721],{"class":373},"  size",[342,723,377],{"class":356},[342,725,726],{"class":713}," ComponentSize",[342,728,498],{"class":356},[342,730,731,734,736,739,742,745],{"class":344,"line":401},[342,732,733],{"class":373},"  aria",[342,735,377],{"class":356},[342,737,738],{"class":713}," Partial",[342,740,741],{"class":356},"\u003C",[342,743,744],{"class":713},"ScenaVideoControlsComponentAria",[342,746,747],{"class":356},">;\n",[342,749,750,753,755,757,759,762],{"class":344,"line":412},[342,751,752],{"class":373},"  customClasses",[342,754,377],{"class":356},[342,756,738],{"class":713},[342,758,741],{"class":356},[342,760,761],{"class":713},"ScenaVideoControlsComponentClasses",[342,763,747],{"class":356},[342,765,766,769,771,773,775,778],{"class":344,"line":422},[342,767,768],{"class":373},"  customStyles",[342,770,377],{"class":356},[342,772,738],{"class":713},[342,774,741],{"class":356},[342,776,777],{"class":713},"ScenaVideoControlsComponentStyles",[342,779,747],{"class":356},[342,781,782],{"class":344,"line":450},[342,783,784],{"class":356},"}\n",[786,787,788],"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":338,"searchDepth":345,"depth":370,"links":790},[791,792,793,794,795],{"id":250,"depth":370,"text":251},{"id":323,"depth":370,"text":324},{"id":501,"depth":370,"text":502},{"id":570,"depth":370,"text":571},{"id":699,"depth":370,"text":700},"Configure or disable the playback control panel (play, pause, etc.).","md",null,{},true,{"title":73,"description":796},"vqiZ6H3VWWCdF0kCt1zg8EMxFsLKonS4xUwJ-ga9vYI",[804,806],{"title":69,"path":70,"stem":71,"description":805,"children":-1},"Configure or disable the call-to-action button with custom text and behavior.",{"title":77,"path":78,"stem":79,"description":807,"children":-1},"Configure or disable the loading indicator shown during video buffering.",1777984320610]