[{"data":1,"prerenderedAt":1458},["ShallowReactive",2],{"navigation":3,"/configuration/video":238,"/configuration/video-surround":1453},[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":48,"body":240,"description":1447,"extension":1448,"links":1449,"meta":1450,"navigation":313,"path":49,"seo":1451,"stem":50,"__hash__":1452},"docs/02.configuration/6.video.md",{"type":241,"value":242,"toc":1439},"minimark",[243,256,263,485,490,754,757,768,771,871,875,885,890,1025,1029,1032,1073,1077,1080,1260,1264,1435],[244,245,246,247,251,252,255],"p",{},"Video configuration controls the underlying ",[248,249,250],"code",{},"\u003Cvideo>"," element — its source, poster image, autoplay behavior, looping, volume, and more. Only ",[248,253,254],{},"src"," is required; all other fields have sensible defaults that work out of the box.",[257,258,259],"scena-container",{},[260,261],"scena-component",{":config":262},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false,\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[264,265,270],"pre",{"className":266,"code":267,"language":268,"meta":269,"style":269},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: {\n    src: '/video.mp4',\n    poster: '/poster.jpg',\n    autoplay: false,\n    loop: true,\n    muted: true,\n  },\n});\n","ts","",[248,271,272,308,315,329,334,355,360,381,394,412,429,443,456,468,474],{"__ignoreMap":269},[273,274,277,281,285,289,292,295,298,302,305],"span",{"class":275,"line":276},"line",1,[273,278,280],{"class":279},"s7zQu","import",[273,282,284],{"class":283},"sMK4o"," {",[273,286,288],{"class":287},"sTEyZ"," useScena",[273,290,291],{"class":283}," }",[273,293,294],{"class":279}," from",[273,296,297],{"class":283}," '",[273,299,301],{"class":300},"sfazB","@retoo/scena",[273,303,304],{"class":283},"'",[273,306,307],{"class":283},";\n",[273,309,311],{"class":275,"line":310},2,[273,312,314],{"emptyLinePlaceholder":313},true,"\n",[273,316,318,320,322,325,327],{"class":275,"line":317},3,[273,319,280],{"class":279},[273,321,297],{"class":283},[273,323,324],{"class":300},"@retoo/scena/styles",[273,326,304],{"class":283},[273,328,307],{"class":283},[273,330,332],{"class":275,"line":331},4,[273,333,314],{"emptyLinePlaceholder":313},[273,335,337,341,344,347,350,353],{"class":275,"line":336},5,[273,338,340],{"class":339},"spNyl","const",[273,342,343],{"class":287}," scena ",[273,345,346],{"class":283},"=",[273,348,288],{"class":349},"s2Zo4",[273,351,352],{"class":287},"()",[273,354,307],{"class":283},[273,356,358],{"class":275,"line":357},6,[273,359,314],{"emptyLinePlaceholder":313},[273,361,363,366,369,372,375,378],{"class":275,"line":362},7,[273,364,365],{"class":279},"await",[273,367,368],{"class":287}," scena",[273,370,371],{"class":283},".",[273,373,374],{"class":349},"mount",[273,376,377],{"class":287},"(",[273,379,380],{"class":283},"{\n",[273,382,384,388,391],{"class":275,"line":383},8,[273,385,387],{"class":386},"swJcz","  video",[273,389,390],{"class":283},":",[273,392,393],{"class":283}," {\n",[273,395,397,400,402,404,407,409],{"class":275,"line":396},9,[273,398,399],{"class":386},"    src",[273,401,390],{"class":283},[273,403,297],{"class":283},[273,405,406],{"class":300},"/video.mp4",[273,408,304],{"class":283},[273,410,411],{"class":283},",\n",[273,413,415,418,420,422,425,427],{"class":275,"line":414},10,[273,416,417],{"class":386},"    poster",[273,419,390],{"class":283},[273,421,297],{"class":283},[273,423,424],{"class":300},"/poster.jpg",[273,426,304],{"class":283},[273,428,411],{"class":283},[273,430,432,435,437,441],{"class":275,"line":431},11,[273,433,434],{"class":386},"    autoplay",[273,436,390],{"class":283},[273,438,440],{"class":439},"sfNiH"," false",[273,442,411],{"class":283},[273,444,446,449,451,454],{"class":275,"line":445},12,[273,447,448],{"class":386},"    loop",[273,450,390],{"class":283},[273,452,453],{"class":439}," true",[273,455,411],{"class":283},[273,457,459,462,464,466],{"class":275,"line":458},13,[273,460,461],{"class":386},"    muted",[273,463,390],{"class":283},[273,465,453],{"class":439},[273,467,411],{"class":283},[273,469,471],{"class":275,"line":470},14,[273,472,473],{"class":283},"  },\n",[273,475,477,480,483],{"class":275,"line":476},15,[273,478,479],{"class":283},"}",[273,481,482],{"class":287},")",[273,484,307],{"class":283},[486,487,489],"h2",{"id":488},"properties","Properties",[491,492,493,512],"table",{},[494,495,496],"thead",{},[497,498,499,503,506,509],"tr",{},[500,501,502],"th",{},"Property",[500,504,505],{},"Type",[500,507,508],{},"Default",[500,510,511],{},"Description",[513,514,515,537,553,572,592,610,628,648,667,695,717,735],"tbody",{},[497,516,517,522,527,530],{},[518,519,520],"td",{},[248,521,254],{},[518,523,524],{},[248,525,526],{},"string",[518,528,529],{},"—",[518,531,532,533],{},"Video file URL. ",[534,535,536],"strong",{},"Required.",[497,538,539,544,548,550],{},[518,540,541],{},[248,542,543],{},"poster",[518,545,546],{},[248,547,526],{},[518,549,529],{},[518,551,552],{},"Image shown before playback starts",[497,554,555,560,564,566],{},[518,556,557],{},[248,558,559],{},"type",[518,561,562],{},[248,563,526],{},[518,565,529],{},[518,567,568,569,482],{},"MIME type hint (e.g. ",[248,570,571],{},"video/mp4",[497,573,574,579,584,589],{},[518,575,576],{},[248,577,578],{},"autoplay",[518,580,581],{},[248,582,583],{},"boolean",[518,585,586],{},[248,587,588],{},"true",[518,590,591],{},"Start playing automatically on mount",[497,593,594,599,603,607],{},[518,595,596],{},[248,597,598],{},"loop",[518,600,601],{},[248,602,583],{},[518,604,605],{},[248,606,588],{},[518,608,609],{},"Restart playback when the video ends",[497,611,612,617,621,625],{},[518,613,614],{},[248,615,616],{},"muted",[518,618,619],{},[248,620,583],{},[518,622,623],{},[248,624,588],{},[518,626,627],{},"Start with audio muted",[497,629,630,635,640,645],{},[518,631,632],{},[248,633,634],{},"volume",[518,636,637],{},[248,638,639],{},"number",[518,641,642],{},[248,643,644],{},"1",[518,646,647],{},"Initial volume level (0.0 to 1.0)",[497,649,650,655,659,664],{},[518,651,652],{},[248,653,654],{},"startTime",[518,656,657],{},[248,658,639],{},[518,660,661],{},[248,662,663],{},"0",[518,665,666],{},"Start playback from this time in seconds",[497,668,669,674,678,683],{},[518,670,671],{},[248,672,673],{},"preload",[518,675,676],{},[248,677,526],{},[518,679,680],{},[248,681,682],{},"metadata",[518,684,685,686,689,690,689,693],{},"Preload strategy — ",[248,687,688],{},"none",", ",[248,691,692],{},"auto",[248,694,682],{},[497,696,697,702,706,708],{},[518,698,699],{},[248,700,701],{},"crossorigin",[518,703,704],{},[248,705,526],{},[518,707,529],{},[518,709,710,711,689,714],{},"CORS setting — ",[248,712,713],{},"anonymous",[248,715,716],{},"use-credentials",[497,718,719,724,728,732],{},[518,720,721],{},[248,722,723],{},"playsinline",[518,725,726],{},[248,727,583],{},[518,729,730],{},[248,731,588],{},[518,733,734],{},"Play inline on mobile instead of fullscreen",[497,736,737,742,746,751],{},[518,738,739],{},[248,740,741],{},"controls",[518,743,744],{},[248,745,583],{},[518,747,748],{},[248,749,750],{},"false",[518,752,753],{},"Show native browser video controls",[486,755,756],{"id":578},"Autoplay",[244,758,759,760,763,764,767],{},"Most mobile browsers block autoplay with sound. Set both ",[248,761,762],{},"autoplay: true"," and ",[248,765,766],{},"muted: true"," to ensure autoplay works across all devices — this is the default configuration.",[244,769,770],{},"Unmuting after a user interaction is allowed by all browsers:",[264,772,774],{"className":266,"code":773,"language":268,"meta":269,"style":269},"import { ScenaEvent } from '@retoo/scena';\n\ninstance.api.events.on(ScenaEvent.ON_VIDEO_CONTAINER_CLICK, () => {\n  instance.api.controller.unmute();\n});\n",[248,775,776,797,801,840,863],{"__ignoreMap":269},[273,777,778,780,782,785,787,789,791,793,795],{"class":275,"line":276},[273,779,280],{"class":279},[273,781,284],{"class":283},[273,783,784],{"class":287}," ScenaEvent",[273,786,291],{"class":283},[273,788,294],{"class":279},[273,790,297],{"class":283},[273,792,301],{"class":300},[273,794,304],{"class":283},[273,796,307],{"class":283},[273,798,799],{"class":275,"line":310},[273,800,314],{"emptyLinePlaceholder":313},[273,802,803,806,808,811,813,816,818,821,824,826,829,832,835,838],{"class":275,"line":317},[273,804,805],{"class":287},"instance",[273,807,371],{"class":283},[273,809,810],{"class":287},"api",[273,812,371],{"class":283},[273,814,815],{"class":287},"events",[273,817,371],{"class":283},[273,819,820],{"class":349},"on",[273,822,823],{"class":287},"(ScenaEvent",[273,825,371],{"class":283},[273,827,828],{"class":287},"ON_VIDEO_CONTAINER_CLICK",[273,830,831],{"class":283},",",[273,833,834],{"class":283}," ()",[273,836,837],{"class":339}," =>",[273,839,393],{"class":283},[273,841,842,845,847,849,851,854,856,859,861],{"class":275,"line":331},[273,843,844],{"class":287},"  instance",[273,846,371],{"class":283},[273,848,810],{"class":287},[273,850,371],{"class":283},[273,852,853],{"class":287},"controller",[273,855,371],{"class":283},[273,857,858],{"class":349},"unmute",[273,860,352],{"class":386},[273,862,307],{"class":283},[273,864,865,867,869],{"class":275,"line":336},[273,866,479],{"class":283},[273,868,482],{"class":287},[273,870,307],{"class":283},[486,872,874],{"id":873},"poster-image","Poster image",[244,876,877,878,880,881,884],{},"The ",[248,879,543],{}," is displayed before playback starts and while the video is loading. With ",[248,882,883],{},"autoplay: false",", the poster stays visible until the user initiates playback.",[257,886,887],{},[260,888],{":config":889,":posterOnly":588},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"square\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[264,891,893],{"className":266,"code":892,"language":268,"meta":269,"style":269},"import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: {\n    src: '/video.mp4',\n    poster: '/poster.jpg',\n    autoplay: false,\n  },\n});\n",[248,894,895,915,919,931,935,949,953,967,975,989,1003,1013,1017],{"__ignoreMap":269},[273,896,897,899,901,903,905,907,909,911,913],{"class":275,"line":276},[273,898,280],{"class":279},[273,900,284],{"class":283},[273,902,288],{"class":287},[273,904,291],{"class":283},[273,906,294],{"class":279},[273,908,297],{"class":283},[273,910,301],{"class":300},[273,912,304],{"class":283},[273,914,307],{"class":283},[273,916,917],{"class":275,"line":310},[273,918,314],{"emptyLinePlaceholder":313},[273,920,921,923,925,927,929],{"class":275,"line":317},[273,922,280],{"class":279},[273,924,297],{"class":283},[273,926,324],{"class":300},[273,928,304],{"class":283},[273,930,307],{"class":283},[273,932,933],{"class":275,"line":331},[273,934,314],{"emptyLinePlaceholder":313},[273,936,937,939,941,943,945,947],{"class":275,"line":336},[273,938,340],{"class":339},[273,940,343],{"class":287},[273,942,346],{"class":283},[273,944,288],{"class":349},[273,946,352],{"class":287},[273,948,307],{"class":283},[273,950,951],{"class":275,"line":357},[273,952,314],{"emptyLinePlaceholder":313},[273,954,955,957,959,961,963,965],{"class":275,"line":362},[273,956,365],{"class":279},[273,958,368],{"class":287},[273,960,371],{"class":283},[273,962,374],{"class":349},[273,964,377],{"class":287},[273,966,380],{"class":283},[273,968,969,971,973],{"class":275,"line":383},[273,970,387],{"class":386},[273,972,390],{"class":283},[273,974,393],{"class":283},[273,976,977,979,981,983,985,987],{"class":275,"line":396},[273,978,399],{"class":386},[273,980,390],{"class":283},[273,982,297],{"class":283},[273,984,406],{"class":300},[273,986,304],{"class":283},[273,988,411],{"class":283},[273,990,991,993,995,997,999,1001],{"class":275,"line":414},[273,992,417],{"class":386},[273,994,390],{"class":283},[273,996,297],{"class":283},[273,998,424],{"class":300},[273,1000,304],{"class":283},[273,1002,411],{"class":283},[273,1004,1005,1007,1009,1011],{"class":275,"line":431},[273,1006,434],{"class":386},[273,1008,390],{"class":283},[273,1010,440],{"class":439},[273,1012,411],{"class":283},[273,1014,1015],{"class":275,"line":445},[273,1016,473],{"class":283},[273,1018,1019,1021,1023],{"class":275,"line":458},[273,1020,479],{"class":283},[273,1022,482],{"class":287},[273,1024,307],{"class":283},[486,1026,1028],{"id":1027},"preload-strategy","Preload strategy",[244,1030,1031],{},"Controls how much video data the browser downloads before playback:",[491,1033,1034,1044],{},[494,1035,1036],{},[497,1037,1038,1041],{},[500,1039,1040],{},"Value",[500,1042,1043],{},"Behavior",[513,1045,1046,1055,1064],{},[497,1047,1048,1052],{},[518,1049,1050],{},[248,1051,688],{},[518,1053,1054],{},"No data preloaded — minimal bandwidth",[497,1056,1057,1061],{},[518,1058,1059],{},[248,1060,682],{},[518,1062,1063],{},"Duration, dimensions, and first frame only (default)",[497,1065,1066,1070],{},[518,1067,1068],{},[248,1069,692],{},[518,1071,1072],{},"Browser decides how much to buffer",[486,1074,1076],{"id":1075},"runtime","Runtime",[244,1078,1079],{},"Swap the source or change playback settings without remounting:",[264,1081,1083],{"className":266,"code":1082,"language":268,"meta":269,"style":269},"import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: { src: '/video.mp4' },\n});\n\ninstance.config.mergeConfig({\n  video: { src: '/new-video.mp4', poster: '/new-poster.jpg' },\n});\n",[248,1084,1085,1105,1109,1121,1125,1139,1143,1165,1187,1195,1199,1217,1252],{"__ignoreMap":269},[273,1086,1087,1089,1091,1093,1095,1097,1099,1101,1103],{"class":275,"line":276},[273,1088,280],{"class":279},[273,1090,284],{"class":283},[273,1092,288],{"class":287},[273,1094,291],{"class":283},[273,1096,294],{"class":279},[273,1098,297],{"class":283},[273,1100,301],{"class":300},[273,1102,304],{"class":283},[273,1104,307],{"class":283},[273,1106,1107],{"class":275,"line":310},[273,1108,314],{"emptyLinePlaceholder":313},[273,1110,1111,1113,1115,1117,1119],{"class":275,"line":317},[273,1112,280],{"class":279},[273,1114,297],{"class":283},[273,1116,324],{"class":300},[273,1118,304],{"class":283},[273,1120,307],{"class":283},[273,1122,1123],{"class":275,"line":331},[273,1124,314],{"emptyLinePlaceholder":313},[273,1126,1127,1129,1131,1133,1135,1137],{"class":275,"line":336},[273,1128,340],{"class":339},[273,1130,343],{"class":287},[273,1132,346],{"class":283},[273,1134,288],{"class":349},[273,1136,352],{"class":287},[273,1138,307],{"class":283},[273,1140,1141],{"class":275,"line":357},[273,1142,314],{"emptyLinePlaceholder":313},[273,1144,1145,1147,1150,1152,1155,1157,1159,1161,1163],{"class":275,"line":362},[273,1146,340],{"class":339},[273,1148,1149],{"class":287}," instance ",[273,1151,346],{"class":283},[273,1153,1154],{"class":279}," await",[273,1156,368],{"class":287},[273,1158,371],{"class":283},[273,1160,374],{"class":349},[273,1162,377],{"class":287},[273,1164,380],{"class":283},[273,1166,1167,1169,1171,1173,1176,1178,1180,1182,1184],{"class":275,"line":383},[273,1168,387],{"class":386},[273,1170,390],{"class":283},[273,1172,284],{"class":283},[273,1174,1175],{"class":386}," src",[273,1177,390],{"class":283},[273,1179,297],{"class":283},[273,1181,406],{"class":300},[273,1183,304],{"class":283},[273,1185,1186],{"class":283}," },\n",[273,1188,1189,1191,1193],{"class":275,"line":396},[273,1190,479],{"class":283},[273,1192,482],{"class":287},[273,1194,307],{"class":283},[273,1196,1197],{"class":275,"line":414},[273,1198,314],{"emptyLinePlaceholder":313},[273,1200,1201,1203,1205,1208,1210,1213,1215],{"class":275,"line":431},[273,1202,805],{"class":287},[273,1204,371],{"class":283},[273,1206,1207],{"class":287},"config",[273,1209,371],{"class":283},[273,1211,1212],{"class":349},"mergeConfig",[273,1214,377],{"class":287},[273,1216,380],{"class":283},[273,1218,1219,1221,1223,1225,1227,1229,1231,1234,1236,1238,1241,1243,1245,1248,1250],{"class":275,"line":445},[273,1220,387],{"class":386},[273,1222,390],{"class":283},[273,1224,284],{"class":283},[273,1226,1175],{"class":386},[273,1228,390],{"class":283},[273,1230,297],{"class":283},[273,1232,1233],{"class":300},"/new-video.mp4",[273,1235,304],{"class":283},[273,1237,831],{"class":283},[273,1239,1240],{"class":386}," poster",[273,1242,390],{"class":283},[273,1244,297],{"class":283},[273,1246,1247],{"class":300},"/new-poster.jpg",[273,1249,304],{"class":283},[273,1251,1186],{"class":283},[273,1253,1254,1256,1258],{"class":275,"line":458},[273,1255,479],{"class":283},[273,1257,482],{"class":287},[273,1259,307],{"class":283},[486,1261,1263],{"id":1262},"customization","Customization",[264,1265,1267],{"className":266,"code":1266,"language":268,"meta":269,"style":269},"import { useScena } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: {\n    src: '/video.mp4',\n    customClasses: { root: 'rounded-none' },\n    customStyles: {\n      root: { objectFit: 'contain' },\n    },\n  },\n});\n",[248,1268,1269,1289,1293,1305,1309,1323,1327,1341,1349,1363,1386,1395,1418,1423,1427],{"__ignoreMap":269},[273,1270,1271,1273,1275,1277,1279,1281,1283,1285,1287],{"class":275,"line":276},[273,1272,280],{"class":279},[273,1274,284],{"class":283},[273,1276,288],{"class":287},[273,1278,291],{"class":283},[273,1280,294],{"class":279},[273,1282,297],{"class":283},[273,1284,301],{"class":300},[273,1286,304],{"class":283},[273,1288,307],{"class":283},[273,1290,1291],{"class":275,"line":310},[273,1292,314],{"emptyLinePlaceholder":313},[273,1294,1295,1297,1299,1301,1303],{"class":275,"line":317},[273,1296,280],{"class":279},[273,1298,297],{"class":283},[273,1300,324],{"class":300},[273,1302,304],{"class":283},[273,1304,307],{"class":283},[273,1306,1307],{"class":275,"line":331},[273,1308,314],{"emptyLinePlaceholder":313},[273,1310,1311,1313,1315,1317,1319,1321],{"class":275,"line":336},[273,1312,340],{"class":339},[273,1314,343],{"class":287},[273,1316,346],{"class":283},[273,1318,288],{"class":349},[273,1320,352],{"class":287},[273,1322,307],{"class":283},[273,1324,1325],{"class":275,"line":357},[273,1326,314],{"emptyLinePlaceholder":313},[273,1328,1329,1331,1333,1335,1337,1339],{"class":275,"line":362},[273,1330,365],{"class":279},[273,1332,368],{"class":287},[273,1334,371],{"class":283},[273,1336,374],{"class":349},[273,1338,377],{"class":287},[273,1340,380],{"class":283},[273,1342,1343,1345,1347],{"class":275,"line":383},[273,1344,387],{"class":386},[273,1346,390],{"class":283},[273,1348,393],{"class":283},[273,1350,1351,1353,1355,1357,1359,1361],{"class":275,"line":396},[273,1352,399],{"class":386},[273,1354,390],{"class":283},[273,1356,297],{"class":283},[273,1358,406],{"class":300},[273,1360,304],{"class":283},[273,1362,411],{"class":283},[273,1364,1365,1368,1370,1372,1375,1377,1379,1382,1384],{"class":275,"line":414},[273,1366,1367],{"class":386},"    customClasses",[273,1369,390],{"class":283},[273,1371,284],{"class":283},[273,1373,1374],{"class":386}," root",[273,1376,390],{"class":283},[273,1378,297],{"class":283},[273,1380,1381],{"class":300},"rounded-none",[273,1383,304],{"class":283},[273,1385,1186],{"class":283},[273,1387,1388,1391,1393],{"class":275,"line":431},[273,1389,1390],{"class":386},"    customStyles",[273,1392,390],{"class":283},[273,1394,393],{"class":283},[273,1396,1397,1400,1402,1404,1407,1409,1411,1414,1416],{"class":275,"line":445},[273,1398,1399],{"class":386},"      root",[273,1401,390],{"class":283},[273,1403,284],{"class":283},[273,1405,1406],{"class":386}," objectFit",[273,1408,390],{"class":283},[273,1410,297],{"class":283},[273,1412,1413],{"class":300},"contain",[273,1415,304],{"class":283},[273,1417,1186],{"class":283},[273,1419,1420],{"class":275,"line":458},[273,1421,1422],{"class":283},"    },\n",[273,1424,1425],{"class":275,"line":470},[273,1426,473],{"class":283},[273,1428,1429,1431,1433],{"class":275,"line":476},[273,1430,479],{"class":283},[273,1432,482],{"class":287},[273,1434,307],{"class":283},[1436,1437,1438],"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 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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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);}",{"title":269,"searchDepth":276,"depth":310,"links":1440},[1441,1442,1443,1444,1445,1446],{"id":488,"depth":310,"text":489},{"id":578,"depth":310,"text":756},{"id":873,"depth":310,"text":874},{"id":1027,"depth":310,"text":1028},{"id":1075,"depth":310,"text":1076},{"id":1262,"depth":310,"text":1263},"Configure video source, poster, preload, autoplay, loop, muted, volume, and playback options.","md",null,{},{"title":48,"description":1447},"bONgeHvMa6mz_hZ_uWL4KlXbwZJZdSpwABkiFZe2PYE",[1454,1456],{"title":44,"path":45,"stem":46,"description":1455,"children":-1},"Anchor the widget within the viewport or container using a 3x3 grid model.",{"title":52,"path":53,"stem":54,"description":1457,"children":-1},"Customize the widget appearance with CSS custom properties (variables).",1777984320148]