[{"data":1,"prerenderedAt":848},["ShallowReactive",2],{"navigation":3,"/api-reference/video-controller":238,"/api-reference/video-controller-surround":843},[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":123,"body":240,"description":837,"extension":838,"links":839,"meta":840,"navigation":477,"path":124,"seo":841,"stem":125,"__hash__":842},"docs/05.api-reference/4.video-controller.md",{"type":241,"value":242,"toc":832},"minimark",[243,252,295,300,438,441,559,563,570,734,817,828],[244,245,246,247,251],"p",{},"The video controller lives at ",[248,249,250],"code",{},"instance.api.controller"," and combines imperative playback methods (play, pause, seek, volume) with reactive state properties that update automatically during playback.",[253,254,259],"pre",{"className":255,"code":256,"language":257,"meta":258,"style":258},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const controller = instance.api.controller;\n","ts","",[248,260,261],{"__ignoreMap":258},[262,263,266,270,274,278,281,284,287,289,292],"span",{"class":264,"line":265},"line",1,[262,267,269],{"class":268},"spNyl","const",[262,271,273],{"class":272},"sTEyZ"," controller ",[262,275,277],{"class":276},"sMK4o","=",[262,279,280],{"class":272}," instance",[262,282,283],{"class":276},".",[262,285,286],{"class":272},"api",[262,288,283],{"class":276},[262,290,291],{"class":272},"controller",[262,293,294],{"class":276},";\n",[296,297,299],"h2",{"id":298},"methods","Methods",[301,302,303,319],"table",{},[304,305,306],"thead",{},[307,308,309,313,316],"tr",{},[310,311,312],"th",{},"Method",[310,314,315],{},"Signature",[310,317,318],{},"Description",[320,321,322,338,353,367,382,396,410,424],"tbody",{},[307,323,324,330,335],{},[325,326,327],"td",{},[248,328,329],{},"play",[325,331,332],{},[248,333,334],{},"() => Promise\u003Cvoid>",[325,336,337],{},"Start or resume playback",[307,339,340,345,350],{},[325,341,342],{},[248,343,344],{},"pause",[325,346,347],{},[248,348,349],{},"() => void",[325,351,352],{},"Pause playback",[307,354,355,360,364],{},[325,356,357],{},[248,358,359],{},"stop",[325,361,362],{},[248,363,349],{},[325,365,366],{},"Stop playback and reset to the beginning",[307,368,369,374,379],{},[325,370,371],{},[248,372,373],{},"seek",[325,375,376],{},[248,377,378],{},"(value: number) => void",[325,380,381],{},"Seek to a specific time in seconds",[307,383,384,389,393],{},[325,385,386],{},[248,387,388],{},"setVolume",[325,390,391],{},[248,392,378],{},[325,394,395],{},"Set volume level (0--1)",[307,397,398,403,407],{},[325,399,400],{},[248,401,402],{},"mute",[325,404,405],{},[248,406,349],{},[325,408,409],{},"Mute the video",[307,411,412,417,421],{},[325,413,414],{},[248,415,416],{},"unmute",[325,418,419],{},[248,420,349],{},[325,422,423],{},"Unmute the video",[307,425,426,431,435],{},[325,427,428],{},[248,429,430],{},"toggleMute",[325,432,433],{},[248,434,349],{},[325,436,437],{},"Toggle between muted and unmuted",[296,439,169],{"id":440},"usage",[253,442,444],{"className":255,"code":443,"language":257,"meta":258,"style":258},"// Start playback\nawait controller.play();\n\n// Seek to 30 seconds\ncontroller.seek(30);\n\n// Set volume to 50%\ncontroller.setVolume(0.5);\n\n// Stop and reset\ncontroller.stop();\n",[248,445,446,452,472,479,485,506,511,517,535,540,546],{"__ignoreMap":258},[262,447,448],{"class":264,"line":265},[262,449,451],{"class":450},"sHwdD","// Start playback\n",[262,453,455,459,462,464,467,470],{"class":264,"line":454},2,[262,456,458],{"class":457},"s7zQu","await",[262,460,461],{"class":272}," controller",[262,463,283],{"class":276},[262,465,329],{"class":466},"s2Zo4",[262,468,469],{"class":272},"()",[262,471,294],{"class":276},[262,473,475],{"class":264,"line":474},3,[262,476,478],{"emptyLinePlaceholder":477},true,"\n",[262,480,482],{"class":264,"line":481},4,[262,483,484],{"class":450},"// Seek to 30 seconds\n",[262,486,488,490,492,494,497,501,504],{"class":264,"line":487},5,[262,489,291],{"class":272},[262,491,283],{"class":276},[262,493,373],{"class":466},[262,495,496],{"class":272},"(",[262,498,500],{"class":499},"sbssI","30",[262,502,503],{"class":272},")",[262,505,294],{"class":276},[262,507,509],{"class":264,"line":508},6,[262,510,478],{"emptyLinePlaceholder":477},[262,512,514],{"class":264,"line":513},7,[262,515,516],{"class":450},"// Set volume to 50%\n",[262,518,520,522,524,526,528,531,533],{"class":264,"line":519},8,[262,521,291],{"class":272},[262,523,283],{"class":276},[262,525,388],{"class":466},[262,527,496],{"class":272},[262,529,530],{"class":499},"0.5",[262,532,503],{"class":272},[262,534,294],{"class":276},[262,536,538],{"class":264,"line":537},9,[262,539,478],{"emptyLinePlaceholder":477},[262,541,543],{"class":264,"line":542},10,[262,544,545],{"class":450},"// Stop and reset\n",[262,547,549,551,553,555,557],{"class":264,"line":548},11,[262,550,291],{"class":272},[262,552,283],{"class":276},[262,554,359],{"class":466},[262,556,469],{"class":272},[262,558,294],{"class":276},[296,560,562],{"id":561},"reactive-state","Reactive state",[244,564,565,566,569],{},"The controller also exposes reactive state properties from ",[248,567,568],{},"ScenaVideoData",". These update automatically during playback.",[301,571,572,584],{},[304,573,574],{},[307,575,576,579,582],{},[310,577,578],{},"Property",[310,580,581],{},"Type",[310,583,318],{},[320,585,586,601,616,630,644,658,672,691,706,720],{},[307,587,588,593,598],{},[325,589,590],{},[248,591,592],{},"state",[325,594,595],{},[248,596,597],{},"ScenaVideoState",[325,599,600],{},"Current playback state",[307,602,603,608,613],{},[325,604,605],{},[248,606,607],{},"currentTime",[325,609,610],{},[248,611,612],{},"number",[325,614,615],{},"Current playback position in seconds",[307,617,618,623,627],{},[325,619,620],{},[248,621,622],{},"duration",[325,624,625],{},[248,626,612],{},[325,628,629],{},"Total video duration in seconds",[307,631,632,637,641],{},[325,633,634],{},[248,635,636],{},"progress",[325,638,639],{},[248,640,612],{},[325,642,643],{},"Playback progress as a fraction (0--1)",[307,645,646,651,655],{},[325,647,648],{},[248,649,650],{},"volume",[325,652,653],{},[248,654,612],{},[325,656,657],{},"Current volume level (0--1)",[307,659,660,665,669],{},[325,661,662],{},[248,663,664],{},"buffer",[325,666,667],{},[248,668,612],{},[325,670,671],{},"Buffered amount as a fraction (0--1)",[307,673,674,679,684],{},[325,675,676],{},[248,677,678],{},"buffered",[325,680,681],{},[248,682,683],{},"TimeRanges | null",[325,685,686,687,690],{},"Raw ",[248,688,689],{},"TimeRanges"," from the video element",[307,692,693,698,703],{},[325,694,695],{},[248,696,697],{},"isBuffering",[325,699,700],{},[248,701,702],{},"boolean",[325,704,705],{},"Whether the video is currently buffering",[307,707,708,713,717],{},[325,709,710],{},[248,711,712],{},"isSeeking",[325,714,715],{},[248,716,702],{},[325,718,719],{},"Whether a seek operation is in progress",[307,721,722,727,731],{},[325,723,724],{},[248,725,726],{},"isMuted",[325,728,729],{},[248,730,702],{},[325,732,733],{},"Whether the video is muted",[253,735,737],{"className":255,"code":736,"language":257,"meta":258,"style":258},"console.log(controller.currentTime); \nconsole.log(controller.duration);    \nconsole.log(controller.progress);\nconsole.log(controller.state);\n",[248,738,739,763,783,800],{"__ignoreMap":258},[262,740,741,744,746,749,752,754,757,760],{"class":264,"line":265},[262,742,743],{"class":272},"console",[262,745,283],{"class":276},[262,747,748],{"class":466},"log",[262,750,751],{"class":272},"(controller",[262,753,283],{"class":276},[262,755,756],{"class":272},"currentTime)",[262,758,759],{"class":276},";",[262,761,762],{"class":272}," \n",[262,764,765,767,769,771,773,775,778,780],{"class":264,"line":454},[262,766,743],{"class":272},[262,768,283],{"class":276},[262,770,748],{"class":466},[262,772,751],{"class":272},[262,774,283],{"class":276},[262,776,777],{"class":272},"duration)",[262,779,759],{"class":276},[262,781,782],{"class":272},"    \n",[262,784,785,787,789,791,793,795,798],{"class":264,"line":474},[262,786,743],{"class":272},[262,788,283],{"class":276},[262,790,748],{"class":466},[262,792,751],{"class":272},[262,794,283],{"class":276},[262,796,797],{"class":272},"progress)",[262,799,294],{"class":276},[262,801,802,804,806,808,810,812,815],{"class":264,"line":481},[262,803,743],{"class":272},[262,805,283],{"class":276},[262,807,748],{"class":466},[262,809,751],{"class":272},[262,811,283],{"class":276},[262,813,814],{"class":272},"state)",[262,816,294],{"class":276},[818,819,821],"callout",{"icon":820,"to":128},"i-lucide-arrow-right",[244,822,823,824,827],{},"See ",[825,826,127],"strong",{}," for the full list of playback states.",[829,830,831],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":258,"searchDepth":265,"depth":454,"links":833},[834,835,836],{"id":298,"depth":454,"text":299},{"id":440,"depth":454,"text":169},{"id":561,"depth":454,"text":562},"Control playback with play, pause, stop, seek, mute, unmute, setVolume, and reactive state properties.","md",null,{},{"title":123,"description":837},"QVNF-sHRcSdBXKk2PNtr9-P_bzHvVaxo_XhEzqOfdvg",[844,846],{"title":119,"path":120,"stem":121,"description":845,"children":-1},"Object returned by mount() providing access to api, constants, visibility, and preview.",{"title":127,"path":128,"stem":129,"description":847,"children":-1},"Playback state machine — idle, loading, playing, paused, ended, error.",1777984323073]