[{"data":1,"prerenderedAt":890},["ShallowReactive",2],{"navigation":3,"/api-reference/video-state":238,"/api-reference/video-state-surround":885},[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":127,"body":240,"description":879,"extension":880,"links":881,"meta":882,"navigation":456,"path":128,"seo":883,"stem":129,"__hash__":884},"docs/05.api-reference/5.video-state.md",{"type":241,"value":242,"toc":874},"minimark",[243,252,297,302,415,418,581,585,592,870],[244,245,246,247,251],"p",{},"An enum representing the current playback state of the video element. The value is available as a reactive property at ",[248,249,250],"code",{},"controller.state"," and is also included in every video event payload.",[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","import { ScenaVideoState } from '@retoo/scena';\n","ts","",[248,260,261],{"__ignoreMap":258},[262,263,266,270,274,278,281,284,287,291,294],"span",{"class":264,"line":265},"line",1,[262,267,269],{"class":268},"s7zQu","import",[262,271,273],{"class":272},"sMK4o"," {",[262,275,277],{"class":276},"sTEyZ"," ScenaVideoState",[262,279,280],{"class":272}," }",[262,282,283],{"class":268}," from",[262,285,286],{"class":272}," '",[262,288,290],{"class":289},"sfazB","@retoo/scena",[262,292,293],{"class":272},"'",[262,295,296],{"class":272},";\n",[298,299,301],"h2",{"id":300},"states","States",[303,304,305,321],"table",{},[306,307,308],"thead",{},[309,310,311,315,318],"tr",{},[312,313,314],"th",{},"Value",[312,316,317],{},"String",[312,319,320],{},"Description",[322,323,324,340,355,370,385,400],"tbody",{},[309,325,326,332,337],{},[327,328,329],"td",{},[248,330,331],{},"IDLE",[327,333,334],{},[248,335,336],{},"idle",[327,338,339],{},"Initial state before any playback action",[309,341,342,347,352],{},[327,343,344],{},[248,345,346],{},"LOADING",[327,348,349],{},[248,350,351],{},"loading",[327,353,354],{},"Video data is being loaded",[309,356,357,362,367],{},[327,358,359],{},[248,360,361],{},"PLAYING",[327,363,364],{},[248,365,366],{},"playing",[327,368,369],{},"Video is actively playing",[309,371,372,377,382],{},[327,373,374],{},[248,375,376],{},"PAUSED",[327,378,379],{},[248,380,381],{},"paused",[327,383,384],{},"Playback is paused",[309,386,387,392,397],{},[327,388,389],{},[248,390,391],{},"ENDED",[327,393,394],{},[248,395,396],{},"ended",[327,398,399],{},"Playback reached the end",[309,401,402,407,412],{},[327,403,404],{},[248,405,406],{},"ERROR",[327,408,409],{},[248,410,411],{},"error",[327,413,414],{},"A playback or loading error occurred",[298,416,169],{"id":417},"usage",[253,419,421],{"className":255,"code":420,"language":257,"meta":258,"style":258},"const controller = instance.api.controller;\n\nif (controller.state === ScenaVideoState.PLAYING) {\n  controller.pause();\n}\n\nif (controller.state === ScenaVideoState.ENDED) {\n  controller.seek(0);\n  await controller.play();\n}\n",[248,422,423,451,458,485,503,509,514,536,558,576],{"__ignoreMap":258},[262,424,425,429,432,435,438,441,444,446,449],{"class":264,"line":265},[262,426,428],{"class":427},"spNyl","const",[262,430,431],{"class":276}," controller ",[262,433,434],{"class":272},"=",[262,436,437],{"class":276}," instance",[262,439,440],{"class":272},".",[262,442,443],{"class":276},"api",[262,445,440],{"class":272},[262,447,448],{"class":276},"controller",[262,450,296],{"class":272},[262,452,454],{"class":264,"line":453},2,[262,455,457],{"emptyLinePlaceholder":456},true,"\n",[262,459,461,464,467,469,472,475,477,479,482],{"class":264,"line":460},3,[262,462,463],{"class":268},"if",[262,465,466],{"class":276}," (controller",[262,468,440],{"class":272},[262,470,471],{"class":276},"state ",[262,473,474],{"class":272},"===",[262,476,277],{"class":276},[262,478,440],{"class":272},[262,480,481],{"class":276},"PLAYING) ",[262,483,484],{"class":272},"{\n",[262,486,488,491,493,497,501],{"class":264,"line":487},4,[262,489,490],{"class":276},"  controller",[262,492,440],{"class":272},[262,494,496],{"class":495},"s2Zo4","pause",[262,498,500],{"class":499},"swJcz","()",[262,502,296],{"class":272},[262,504,506],{"class":264,"line":505},5,[262,507,508],{"class":272},"}\n",[262,510,512],{"class":264,"line":511},6,[262,513,457],{"emptyLinePlaceholder":456},[262,515,517,519,521,523,525,527,529,531,534],{"class":264,"line":516},7,[262,518,463],{"class":268},[262,520,466],{"class":276},[262,522,440],{"class":272},[262,524,471],{"class":276},[262,526,474],{"class":272},[262,528,277],{"class":276},[262,530,440],{"class":272},[262,532,533],{"class":276},"ENDED) ",[262,535,484],{"class":272},[262,537,539,541,543,546,549,553,556],{"class":264,"line":538},8,[262,540,490],{"class":276},[262,542,440],{"class":272},[262,544,545],{"class":495},"seek",[262,547,548],{"class":499},"(",[262,550,552],{"class":551},"sbssI","0",[262,554,555],{"class":499},")",[262,557,296],{"class":272},[262,559,561,564,567,569,572,574],{"class":264,"line":560},9,[262,562,563],{"class":268},"  await",[262,565,566],{"class":276}," controller",[262,568,440],{"class":272},[262,570,571],{"class":495},"play",[262,573,500],{"class":499},[262,575,296],{"class":272},[262,577,579],{"class":264,"line":578},10,[262,580,508],{"class":272},[298,582,584],{"id":583},"with-events","With events",[244,586,587,588,591],{},"The ",[248,589,590],{},"ON_VIDEO_STATE_CHANGE"," event fires whenever the state transitions. The handler receives the new state:",[253,593,595],{"className":255,"code":594,"language":257,"meta":258,"style":258},"import { ScenaEvent, ScenaVideoState } from '@retoo/scena';\n\ninstance.api.events.on(ScenaEvent.ON_VIDEO_STATE_CHANGE, ({ state }) => {\n  switch (state) {\n    case ScenaVideoState.PLAYING:\n      console.log('Started playing');\n      break;\n    case ScenaVideoState.PAUSED:\n      console.log('Paused');\n      break;\n    case ScenaVideoState.ENDED:\n      console.log('Finished');\n      break;\n    case ScenaVideoState.ERROR:\n      console.log('Error occurred');\n      break;\n  }\n});\n",[248,596,597,623,627,671,687,701,724,731,743,764,770,783,805,812,825,847,854,860],{"__ignoreMap":258},[262,598,599,601,603,606,609,611,613,615,617,619,621],{"class":264,"line":265},[262,600,269],{"class":268},[262,602,273],{"class":272},[262,604,605],{"class":276}," ScenaEvent",[262,607,608],{"class":272},",",[262,610,277],{"class":276},[262,612,280],{"class":272},[262,614,283],{"class":268},[262,616,286],{"class":272},[262,618,290],{"class":289},[262,620,293],{"class":272},[262,622,296],{"class":272},[262,624,625],{"class":264,"line":453},[262,626,457],{"emptyLinePlaceholder":456},[262,628,629,632,634,636,638,641,643,646,649,651,653,655,658,662,665,668],{"class":264,"line":460},[262,630,631],{"class":276},"instance",[262,633,440],{"class":272},[262,635,443],{"class":276},[262,637,440],{"class":272},[262,639,640],{"class":276},"events",[262,642,440],{"class":272},[262,644,645],{"class":495},"on",[262,647,648],{"class":276},"(ScenaEvent",[262,650,440],{"class":272},[262,652,590],{"class":276},[262,654,608],{"class":272},[262,656,657],{"class":272}," ({",[262,659,661],{"class":660},"sHdIc"," state",[262,663,664],{"class":272}," })",[262,666,667],{"class":427}," =>",[262,669,670],{"class":272}," {\n",[262,672,673,676,679,682,685],{"class":264,"line":487},[262,674,675],{"class":268},"  switch",[262,677,678],{"class":499}," (",[262,680,681],{"class":276},"state",[262,683,684],{"class":499},") ",[262,686,484],{"class":272},[262,688,689,692,694,696,698],{"class":264,"line":505},[262,690,691],{"class":268},"    case",[262,693,277],{"class":276},[262,695,440],{"class":272},[262,697,361],{"class":276},[262,699,700],{"class":272},":\n",[262,702,703,706,708,711,713,715,718,720,722],{"class":264,"line":511},[262,704,705],{"class":276},"      console",[262,707,440],{"class":272},[262,709,710],{"class":495},"log",[262,712,548],{"class":499},[262,714,293],{"class":272},[262,716,717],{"class":289},"Started playing",[262,719,293],{"class":272},[262,721,555],{"class":499},[262,723,296],{"class":272},[262,725,726,729],{"class":264,"line":516},[262,727,728],{"class":268},"      break",[262,730,296],{"class":272},[262,732,733,735,737,739,741],{"class":264,"line":538},[262,734,691],{"class":268},[262,736,277],{"class":276},[262,738,440],{"class":272},[262,740,376],{"class":276},[262,742,700],{"class":272},[262,744,745,747,749,751,753,755,758,760,762],{"class":264,"line":560},[262,746,705],{"class":276},[262,748,440],{"class":272},[262,750,710],{"class":495},[262,752,548],{"class":499},[262,754,293],{"class":272},[262,756,757],{"class":289},"Paused",[262,759,293],{"class":272},[262,761,555],{"class":499},[262,763,296],{"class":272},[262,765,766,768],{"class":264,"line":578},[262,767,728],{"class":268},[262,769,296],{"class":272},[262,771,773,775,777,779,781],{"class":264,"line":772},11,[262,774,691],{"class":268},[262,776,277],{"class":276},[262,778,440],{"class":272},[262,780,391],{"class":276},[262,782,700],{"class":272},[262,784,786,788,790,792,794,796,799,801,803],{"class":264,"line":785},12,[262,787,705],{"class":276},[262,789,440],{"class":272},[262,791,710],{"class":495},[262,793,548],{"class":499},[262,795,293],{"class":272},[262,797,798],{"class":289},"Finished",[262,800,293],{"class":272},[262,802,555],{"class":499},[262,804,296],{"class":272},[262,806,808,810],{"class":264,"line":807},13,[262,809,728],{"class":268},[262,811,296],{"class":272},[262,813,815,817,819,821,823],{"class":264,"line":814},14,[262,816,691],{"class":268},[262,818,277],{"class":276},[262,820,440],{"class":272},[262,822,406],{"class":276},[262,824,700],{"class":272},[262,826,828,830,832,834,836,838,841,843,845],{"class":264,"line":827},15,[262,829,705],{"class":276},[262,831,440],{"class":272},[262,833,710],{"class":495},[262,835,548],{"class":499},[262,837,293],{"class":272},[262,839,840],{"class":289},"Error occurred",[262,842,293],{"class":272},[262,844,555],{"class":499},[262,846,296],{"class":272},[262,848,850,852],{"class":264,"line":849},16,[262,851,728],{"class":268},[262,853,296],{"class":272},[262,855,857],{"class":264,"line":856},17,[262,858,859],{"class":272},"  }\n",[262,861,863,866,868],{"class":264,"line":862},18,[262,864,865],{"class":272},"}",[262,867,555],{"class":276},[262,869,296],{"class":272},[871,872,873],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":258,"searchDepth":265,"depth":453,"links":875},[876,877,878],{"id":300,"depth":453,"text":301},{"id":417,"depth":453,"text":169},{"id":583,"depth":453,"text":584},"Playback state machine — idle, loading, playing, paused, ended, error.","md",null,{},{"title":127,"description":879},"hq3ZGDZE_TmC9RyvdpT7xlKw4xZs7DkmTKs719aJNoA",[886,888],{"title":123,"path":124,"stem":125,"description":887,"children":-1},"Control playback with play, pause, stop, seek, mute, unmute, setVolume, and reactive state properties.",{"title":131,"path":132,"stem":133,"description":889,"children":-1},"Programmatically show and hide the widget with show(), hide(), isHidden, and isShownOnReady.",1777984323084]