[{"data":1,"prerenderedAt":1262},["ShallowReactive",2],{"navigation_docs":3,"-video-player-getting-started":63,"-video-player-getting-started-surround":1257},[4,26,44],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide:rocket","\u002Fgetting-started","01.getting-started",[10,14],{"title":11,"path":12,"stem":13,"icon":6},"Introduction","\u002Fgetting-started\u002Fintroduction","01.getting-started\u002F01.introduction",{"title":15,"icon":16,"path":17,"stem":18,"children":19,"page":25},"AI","i-lucide:bot","\u002Fgetting-started\u002Fai","01.getting-started\u002F02.ai",[20],{"title":21,"path":22,"stem":23,"icon":24},"LLMs Integration","\u002Fgetting-started\u002Fai\u002Fllms-txt","01.getting-started\u002F02.ai\u002F01.llms-txt","i-lucide:folder-code",false,{"title":27,"path":28,"stem":29,"children":30},"Video Player","\u002Fvideo-player","02.video-player",[31,34,39],{"title":27,"path":28,"stem":32,"icon":33},"02.video-player\u002Findex","i-lucide:play-circle",{"title":35,"path":36,"stem":37,"icon":38},"Getting started","\u002Fvideo-player\u002Fgetting-started","02.video-player\u002F01.getting-started","i-lucide:download",{"title":40,"path":41,"stem":42,"icon":43},"API reference","\u002Fvideo-player\u002Fapi","02.video-player\u002F02.api","i-lucide:book-open",{"title":45,"icon":46,"path":47,"stem":48,"children":49,"page":25},"Ship Kit","i-lucide:package","\u002Fshipkit","03.shipkit",[50,53,58],{"title":11,"path":51,"stem":52,"icon":46},"\u002Fshipkit\u002Fintroduction","03.shipkit\u002F01.introduction",{"title":54,"path":55,"stem":56,"icon":57},"CLI","\u002Fshipkit\u002Fcli","03.shipkit\u002F02.cli","i-lucide:terminal",{"title":59,"path":60,"stem":61,"icon":62},"Vite Configs","\u002Fshipkit\u002Fvite-configs","03.shipkit\u002F03.vite-configs","i-lucide:code",{"id":64,"title":35,"body":65,"description":1250,"extension":1251,"links":1252,"meta":1253,"navigation":1254,"path":36,"seo":1255,"stem":37,"__hash__":1256},"docs\u002F02.video-player\u002F01.getting-started.md",{"type":66,"value":67,"toc":1235},"minimark",[68,73,458,462,468,471,475,481,571,575,634,643,647,660,898,905,919,923,933,1007,1016,1020,1037,1063,1067,1082,1096,1119,1125,1131,1148,1168,1185,1189,1215,1231],[69,70,72],"h2",{"id":71},"install","Install",[74,75,76,81,107,111,115,279,283,302,451],"steps",{},[77,78,80],"h3",{"id":79},"add-the-package","Add the package",[82,83,88],"pre",{"className":84,"code":85,"language":86,"meta":87,"style":87},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @munsonlabs\u002Fvideo-player\n","bash","",[89,90,91],"code",{"__ignoreMap":87},[92,93,96,100,104],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"sBMFI","npm",[92,101,103],{"class":102},"sfazB"," install",[92,105,106],{"class":102}," @munsonlabs\u002Fvideo-player\n",[77,108,110],{"id":109},"mount-a-video","Mount a video",[112,113,114],"p",{},"Import the CSS once alongside the component you use:",[82,116,120],{"className":117,"code":118,"language":119,"meta":87,"style":87},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { VideoCard } from '@munsonlabs\u002Fvideo-player'\nimport '@munsonlabs\u002Fvideo-player\u002Fstyle'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVideoCard\n    title=\"Big Buck Bunny\"\n    src=\"https:\u002F\u002Fcdn.jwplayer.com\u002Fvideos\u002FO5chtspP-4VHSaSK0.mp4\"\n    poster=\"https:\u002F\u002Fstorage.googleapis.com\u002Fgtv-videos-bucket\u002Fsample\u002Fimages\u002FBigBuckBunny.jpg\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue",[89,121,122,139,168,180,190,197,207,216,234,249,264,270],{"__ignoreMap":87},[92,123,124,128,132,136],{"class":94,"line":95},[92,125,127],{"class":126},"sMK4o","\u003C",[92,129,131],{"class":130},"swJcz","script",[92,133,135],{"class":134},"spNyl"," setup",[92,137,138],{"class":126},">\n",[92,140,142,146,149,153,156,159,162,165],{"class":94,"line":141},2,[92,143,145],{"class":144},"s7zQu","import",[92,147,148],{"class":126}," {",[92,150,152],{"class":151},"sTEyZ"," VideoCard",[92,154,155],{"class":126}," }",[92,157,158],{"class":144}," from",[92,160,161],{"class":126}," '",[92,163,164],{"class":102},"@munsonlabs\u002Fvideo-player",[92,166,167],{"class":126},"'\n",[92,169,171,173,175,178],{"class":94,"line":170},3,[92,172,145],{"class":144},[92,174,161],{"class":126},[92,176,177],{"class":102},"@munsonlabs\u002Fvideo-player\u002Fstyle",[92,179,167],{"class":126},[92,181,183,186,188],{"class":94,"line":182},4,[92,184,185],{"class":126},"\u003C\u002F",[92,187,131],{"class":130},[92,189,138],{"class":126},[92,191,193],{"class":94,"line":192},5,[92,194,196],{"emptyLinePlaceholder":195},true,"\n",[92,198,200,202,205],{"class":94,"line":199},6,[92,201,127],{"class":126},[92,203,204],{"class":130},"template",[92,206,138],{"class":126},[92,208,210,213],{"class":94,"line":209},7,[92,211,212],{"class":126},"  \u003C",[92,214,215],{"class":130},"VideoCard\n",[92,217,219,222,225,228,231],{"class":94,"line":218},8,[92,220,221],{"class":134},"    title",[92,223,224],{"class":126},"=",[92,226,227],{"class":126},"\"",[92,229,230],{"class":102},"Big Buck Bunny",[92,232,233],{"class":126},"\"\n",[92,235,237,240,242,244,247],{"class":94,"line":236},9,[92,238,239],{"class":134},"    src",[92,241,224],{"class":126},[92,243,227],{"class":126},[92,245,246],{"class":102},"https:\u002F\u002Fcdn.jwplayer.com\u002Fvideos\u002FO5chtspP-4VHSaSK0.mp4",[92,248,233],{"class":126},[92,250,252,255,257,259,262],{"class":94,"line":251},10,[92,253,254],{"class":134},"    poster",[92,256,224],{"class":126},[92,258,227],{"class":126},[92,260,261],{"class":102},"https:\u002F\u002Fstorage.googleapis.com\u002Fgtv-videos-bucket\u002Fsample\u002Fimages\u002FBigBuckBunny.jpg",[92,263,233],{"class":126},[92,265,267],{"class":94,"line":266},11,[92,268,269],{"class":126},"  \u002F>\n",[92,271,273,275,277],{"class":94,"line":272},12,[92,274,185],{"class":126},[92,276,204],{"class":130},[92,278,138],{"class":126},[77,280,282],{"id":281},"listen-for-playback-events","Listen for playback events",[112,284,285,286,289,290,293,294,297,298,301],{},"Every component emits ",[89,287,288],{},"state-change"," - the single event stream for everything the player does, including ",[89,291,292],{},"timeupdate"," (live position) and ",[89,295,296],{},"tap"," (the user tapped the video, even with ",[89,299,300],{},"controls=\"false\"","):",[82,303,305],{"className":117,"code":304,"language":119,"meta":87,"style":87},"\u003Cscript setup>\nfunction onStateChange(e) {\n  console.log(e.type, e.currentTime, e.src)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVideoCard src=\"...\" @state-change=\"onStateChange\" \u002F>\n\u003C\u002Ftemplate>\n",[89,306,307,317,339,382,387,395,399,407,443],{"__ignoreMap":87},[92,308,309,311,313,315],{"class":94,"line":95},[92,310,127],{"class":126},[92,312,131],{"class":130},[92,314,135],{"class":134},[92,316,138],{"class":126},[92,318,319,322,326,329,333,336],{"class":94,"line":141},[92,320,321],{"class":134},"function",[92,323,325],{"class":324},"s2Zo4"," onStateChange",[92,327,328],{"class":126},"(",[92,330,332],{"class":331},"sHdIc","e",[92,334,335],{"class":126},")",[92,337,338],{"class":126}," {\n",[92,340,341,344,347,350,352,354,356,359,362,365,367,370,372,374,376,379],{"class":94,"line":170},[92,342,343],{"class":151},"  console",[92,345,346],{"class":126},".",[92,348,349],{"class":324},"log",[92,351,328],{"class":130},[92,353,332],{"class":151},[92,355,346],{"class":126},[92,357,358],{"class":151},"type",[92,360,361],{"class":126},",",[92,363,364],{"class":151}," e",[92,366,346],{"class":126},[92,368,369],{"class":151},"currentTime",[92,371,361],{"class":126},[92,373,364],{"class":151},[92,375,346],{"class":126},[92,377,378],{"class":151},"src",[92,380,381],{"class":130},")\n",[92,383,384],{"class":94,"line":182},[92,385,386],{"class":126},"}\n",[92,388,389,391,393],{"class":94,"line":192},[92,390,185],{"class":126},[92,392,131],{"class":130},[92,394,138],{"class":126},[92,396,397],{"class":94,"line":199},[92,398,196],{"emptyLinePlaceholder":195},[92,400,401,403,405],{"class":94,"line":209},[92,402,127],{"class":126},[92,404,204],{"class":130},[92,406,138],{"class":126},[92,408,409,411,414,417,419,421,424,426,429,431,433,435,438,440],{"class":94,"line":218},[92,410,212],{"class":126},[92,412,413],{"class":130},"VideoCard",[92,415,416],{"class":134}," src",[92,418,224],{"class":126},[92,420,227],{"class":126},[92,422,423],{"class":102},"...",[92,425,227],{"class":126},[92,427,428],{"class":126}," @",[92,430,288],{"class":134},[92,432,224],{"class":126},[92,434,227],{"class":126},[92,436,437],{"class":151},"onStateChange",[92,439,227],{"class":126},[92,441,442],{"class":126}," \u002F>\n",[92,444,445,447,449],{"class":94,"line":236},[92,446,185],{"class":126},[92,448,204],{"class":130},[92,450,138],{"class":126},[112,452,453,454,457],{},"See the ",[455,456,40],"a",{"href":41}," for the full event list.",[69,459,461],{"id":460},"live-demo","Live demo",[112,463,464,465,467],{},"This is ",[89,466,164],{},"'s actual published web component, loaded from npm at page load - not a mockup:",[469,470],"video-player-demo",{},[69,472,474],{"id":473},"the-platform-is-auto-detected","The platform is auto-detected",[112,476,477,478,480],{},"There's no separate prop to set which platform a video is on - it's inferred from the shape of ",[89,479,378],{},":",[482,483,484,497],"table",{},[485,486,487],"thead",{},[488,489,490,494],"tr",{},[491,492,493],"th",{},"Platform",[491,495,496],{},"URL format",[498,499,500,511,521,531,541,555],"tbody",{},[488,501,502,506],{},[503,504,505],"td",{},"YouTube",[503,507,508],{},[89,509,510],{},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=VIDEO_ID",[488,512,513,516],{},[503,514,515],{},"Vimeo",[503,517,518],{},[89,519,520],{},"https:\u002F\u002Fvimeo.com\u002FVIDEO_ID",[488,522,523,526],{},[503,524,525],{},"Dailymotion",[503,527,528],{},[89,529,530],{},"https:\u002F\u002Fwww.dailymotion.com\u002Fvideo\u002FVIDEO_ID",[488,532,533,536],{},[503,534,535],{},"Brightcove",[503,537,538],{},[89,539,540],{},"https:\u002F\u002Fplayers.brightcove.net\u002FACCOUNT_ID\u002FPLAYER_ID_EMBED\u002Findex.html?videoId=VIDEO_ID",[488,542,543,546],{},[503,544,545],{},"JW Player",[503,547,548,551,552],{},[89,549,550],{},"https:\u002F\u002Fcdn.jwplayer.com\u002Fvideos\u002F..."," · ",[89,553,554],{},"jwplayer:\u002F\u002FMEDIA_ID",[488,556,557,560],{},[503,558,559],{},"Plain HTML5",[503,561,562,563,566,567,570],{},"Any direct MP4 \u002F HLS (",[89,564,565],{},".m3u8",") \u002F DASH (",[89,568,569],{},".mpd",") URL",[69,572,574],{"id":573},"components","Components",[482,576,577,587],{},[485,578,579],{},[488,580,581,584],{},[491,582,583],{},"Component",[491,585,586],{},"Use it for",[498,588,589,598,608,621],{},[488,590,591,595],{},[503,592,593],{},[89,594,413],{},[503,596,597],{},"The common case - one video, lazy by default (shows a poster until clicked)",[488,599,600,605],{},[503,601,602],{},[89,603,604],{},"VideoPlayer",[503,606,607],{},"Same player, but always mounts immediately - use when you don't want the lazy placeholder",[488,609,610,615],{},[503,611,612],{},[89,613,614],{},"VideoStage",[503,616,617,618,620],{},"A sticky, full-width player that receives videos from any ",[89,619,413],{}," on the page via window events, and minifies to a corner pip when scrolled out of view",[488,622,623,628],{},[503,624,625],{},[89,626,627],{},"VideoPlaceholder",[503,629,630,631,633],{},"The poster\u002Floading placeholder ",[89,632,413],{}," shows before mount - exported in case you want to reuse it",[635,636,638,639,642],"callout",{"type":637},"info","Register all four at once with ",[89,640,641],{},"app.use(VideoPlayerPlugin)"," instead of importing them individually.",[69,644,646],{"id":645},"building-a-playlist-stage","Building a playlist stage",[112,648,649,650,653,654,656,657,659],{},"Pass ",[89,651,652],{},"playlist"," (an array of the same props each ",[89,655,413],{}," takes) to let ",[89,658,614],{}," track position within it and show next\u002Fprevious controls:",[82,661,663],{"className":117,"code":662,"language":119,"meta":87,"style":87},"\u003Cscript setup>\nimport { VideoStage, VideoCard } from '@munsonlabs\u002Fvideo-player'\nimport '@munsonlabs\u002Fvideo-player\u002Fstyle'\n\nconst videos = [\n  { VideoCard: 'https:\u002F\u002F...', title: 'One' },\n  { VideoCard: 'https:\u002F\u002F...', title: 'Two' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVideoStage :playlist=\"videos\" \u002F>\n  \u003CVideoCard v-for=\"video in videos\" :key=\"video.VideoCard\" v-bind=\"video\" \u002F>\n\u003C\u002Ftemplate>\n",[89,664,665,675,698,708,712,725,759,788,793,801,805,813,835,889],{"__ignoreMap":87},[92,666,667,669,671,673],{"class":94,"line":95},[92,668,127],{"class":126},[92,670,131],{"class":130},[92,672,135],{"class":134},[92,674,138],{"class":126},[92,676,677,679,681,684,686,688,690,692,694,696],{"class":94,"line":141},[92,678,145],{"class":144},[92,680,148],{"class":126},[92,682,683],{"class":151}," VideoStage",[92,685,361],{"class":126},[92,687,152],{"class":151},[92,689,155],{"class":126},[92,691,158],{"class":144},[92,693,161],{"class":126},[92,695,164],{"class":102},[92,697,167],{"class":126},[92,699,700,702,704,706],{"class":94,"line":170},[92,701,145],{"class":144},[92,703,161],{"class":126},[92,705,177],{"class":102},[92,707,167],{"class":126},[92,709,710],{"class":94,"line":182},[92,711,196],{"emptyLinePlaceholder":195},[92,713,714,717,720,722],{"class":94,"line":192},[92,715,716],{"class":134},"const",[92,718,719],{"class":151}," videos ",[92,721,224],{"class":126},[92,723,724],{"class":151}," [\n",[92,726,727,730,732,734,736,739,742,744,747,749,751,754,756],{"class":94,"line":199},[92,728,729],{"class":126},"  {",[92,731,152],{"class":130},[92,733,480],{"class":126},[92,735,161],{"class":126},[92,737,738],{"class":102},"https:\u002F\u002F...",[92,740,741],{"class":126},"'",[92,743,361],{"class":126},[92,745,746],{"class":130}," title",[92,748,480],{"class":126},[92,750,161],{"class":126},[92,752,753],{"class":102},"One",[92,755,741],{"class":126},[92,757,758],{"class":126}," },\n",[92,760,761,763,765,767,769,771,773,775,777,779,781,784,786],{"class":94,"line":209},[92,762,729],{"class":126},[92,764,152],{"class":130},[92,766,480],{"class":126},[92,768,161],{"class":126},[92,770,738],{"class":102},[92,772,741],{"class":126},[92,774,361],{"class":126},[92,776,746],{"class":130},[92,778,480],{"class":126},[92,780,161],{"class":126},[92,782,783],{"class":102},"Two",[92,785,741],{"class":126},[92,787,758],{"class":126},[92,789,790],{"class":94,"line":218},[92,791,792],{"class":151},"]\n",[92,794,795,797,799],{"class":94,"line":236},[92,796,185],{"class":126},[92,798,131],{"class":130},[92,800,138],{"class":126},[92,802,803],{"class":94,"line":251},[92,804,196],{"emptyLinePlaceholder":195},[92,806,807,809,811],{"class":94,"line":266},[92,808,127],{"class":126},[92,810,204],{"class":130},[92,812,138],{"class":126},[92,814,815,817,819,822,824,826,828,831,833],{"class":94,"line":272},[92,816,212],{"class":126},[92,818,614],{"class":130},[92,820,821],{"class":126}," :",[92,823,652],{"class":134},[92,825,224],{"class":126},[92,827,227],{"class":126},[92,829,830],{"class":151},"videos",[92,832,227],{"class":126},[92,834,442],{"class":126},[92,836,838,840,842,845,847,849,852,855,857,859,861,864,866,868,870,872,874,876,879,881,883,885,887],{"class":94,"line":837},13,[92,839,212],{"class":126},[92,841,413],{"class":130},[92,843,844],{"class":144}," v-for",[92,846,224],{"class":126},[92,848,227],{"class":126},[92,850,851],{"class":151},"video",[92,853,854],{"class":126}," in ",[92,856,830],{"class":151},[92,858,227],{"class":126},[92,860,821],{"class":126},[92,862,863],{"class":134},"key",[92,865,224],{"class":126},[92,867,227],{"class":126},[92,869,851],{"class":151},[92,871,346],{"class":126},[92,873,413],{"class":151},[92,875,227],{"class":126},[92,877,878],{"class":134}," v-bind",[92,880,224],{"class":126},[92,882,227],{"class":126},[92,884,851],{"class":151},[92,886,227],{"class":126},[92,888,442],{"class":126},[92,890,892,894,896],{"class":94,"line":891},14,[92,893,185],{"class":126},[92,895,204],{"class":130},[92,897,138],{"class":126},[112,899,900,901,904],{},"Auto-advance to the next entry on ",[89,902,903],{},"ended"," is built in (persisted per-browser, toggled from the controls popup's \"Auto\" button) - there's no prop for it.",[112,906,907,908,910,911,914,915,918],{},"When ",[89,909,614],{}," is pinned to a corner, it can end up covering content lower on the page - place a ",[89,912,913],{},"HideMarker"," just before that content and the stage tucks itself out of the way while the marker is in view. See the ",[455,916,40],{"href":917},"\u002Fvideo-player\u002Fapi#hiding-the-pinned-stage-over-content"," for details.",[69,920,922],{"id":921},"ads-and-header-bidding","Ads and header bidding",[112,924,649,925,928,929,932],{},[89,926,927],{},"ad-tag-url"," for a plain VAST\u002FVMAP ad, or ",[89,930,931],{},"header-bidding"," to run a Prebid.js auction first and fall back to the plain ad tag on no-fill:",[82,934,936],{"className":117,"code":935,"language":119,"meta":87,"style":87},"\u003CVideoCard\n  src=\"https:\u002F\u002F...\"\n  ad-tag-url=\"https:\u002F\u002Fpubads.g.doubleclick.net\u002Fgampad\u002Fads?...\"\n  :ad-tag-params=\"{ description_url: 'https:\u002F\u002Fexample.com' }\"\n\u002F>\n",[89,937,938,944,957,971,1002],{"__ignoreMap":87},[92,939,940,942],{"class":94,"line":95},[92,941,127],{"class":126},[92,943,215],{"class":130},[92,945,946,949,951,953,955],{"class":94,"line":141},[92,947,948],{"class":134},"  src",[92,950,224],{"class":126},[92,952,227],{"class":126},[92,954,738],{"class":102},[92,956,233],{"class":126},[92,958,959,962,964,966,969],{"class":94,"line":170},[92,960,961],{"class":134},"  ad-tag-url",[92,963,224],{"class":126},[92,965,227],{"class":126},[92,967,968],{"class":102},"https:\u002F\u002Fpubads.g.doubleclick.net\u002Fgampad\u002Fads?...",[92,970,233],{"class":126},[92,972,973,976,979,981,983,986,989,991,993,996,998,1000],{"class":94,"line":182},[92,974,975],{"class":126},"  :",[92,977,978],{"class":134},"ad-tag-params",[92,980,224],{"class":126},[92,982,227],{"class":126},[92,984,985],{"class":126},"{",[92,987,988],{"class":130}," description_url",[92,990,480],{"class":126},[92,992,161],{"class":126},[92,994,995],{"class":102},"https:\u002F\u002Fexample.com",[92,997,741],{"class":126},[92,999,155],{"class":126},[92,1001,233],{"class":126},[92,1003,1004],{"class":94,"line":192},[92,1005,1006],{"class":151},"\u002F>\n",[112,1008,453,1009,1011,1012,1015],{},[455,1010,40],{"href":41}," for the full prop list, and the package ",[89,1013,1014],{},"README.md"," for the header-bidding config shape.",[69,1017,1019],{"id":1018},"auto-play-in-a-scroll-snap-feed","Auto-play in a scroll-snap feed",[112,1021,1022,1023,1026,1027,1029,1030,1033,1034,1036],{},"Set ",[89,1024,1025],{},"playInView"," to auto-play once a video is at least half visible, and auto-pause once it isn't - it works with ",[89,1028,413],{},"'s default lazy placeholder too, so you don't need to disable ",[89,1031,1032],{},"lazy"," to use it. If several ",[89,1035,1025],{}," videos are visible at once, only the last one to cross the threshold plays.",[82,1038,1040],{"className":117,"code":1039,"language":119,"meta":87,"style":87},"\u003CVideoCard src=\"...\" play-when-in-view \u002F>\n",[89,1041,1042],{"__ignoreMap":87},[92,1043,1044,1046,1048,1050,1052,1054,1056,1058,1061],{"class":94,"line":95},[92,1045,127],{"class":126},[92,1047,413],{"class":130},[92,1049,416],{"class":134},[92,1051,224],{"class":126},[92,1053,227],{"class":126},[92,1055,423],{"class":102},[92,1057,227],{"class":126},[92,1059,1060],{"class":134}," play-when-in-view",[92,1062,442],{"class":126},[69,1064,1066],{"id":1065},"autoplay-mute-volume","Autoplay, mute & volume",[112,1068,1069,1070,1073,1074,1077,1078,1081],{},"Unless a video sets ",[89,1071,1072],{},"muted","\u002F",[89,1075,1076],{},"volume"," explicitly, every player on the page shares one persisted audio preference (",[89,1079,1080],{},"localStorage",", updated whenever a viewer actually presses a mute button or drags a volume slider) - a newly-mounted or completely independent player starts at whatever level the viewer last chose anywhere else, instead of always resetting to full volume\u002Funmuted.",[112,1083,1084,1085,1089,1090,1073,1093,1095],{},"Volume is never restricted - it always follows the shared preference. Mute has one hard exception layered on top: ",[1086,1087,1088],"strong",{},"autoplay-ish playback with no user gesture behind it must start muted",", full stop, regardless of the stored preference. This isn't a library choice, it's the browser enforcing its autoplay-with-sound policy - unmuted ",[89,1091,1092],{},"autoplay",[89,1094,1025],{}," without a gesture is blocked or force-muted by the browser itself. This applies to:",[1097,1098,1099,1110],"ul",{},[1100,1101,1102,1105,1106,1073,1108,346],"li",{},[89,1103,1104],{},"autoplay=\"true\""," set directly on ",[89,1107,413],{},[89,1109,604],{},[1100,1111,1112,1113,1115,1116,1118],{},"A ",[89,1114,1025],{}," video actually starting once scrolled into view - re-checked at that exact moment (not just once at mount, since a ",[89,1117,1025],{}," player can sit mounted-but-paused for a long time before it actually plays), so if you unmute something else in the meantime, it plays unmuted once it becomes visible instead of forcing itself muted again.",[112,1120,1121,1122,1124],{},"That policy is scoped to the current page load, though, not to ",[89,1123,1080],{},": once a real gesture has resulted in unmuted playback during this session - a click that happens to land unmuted (see below), or an explicit press of a mute button\u002Fvolume slider - browsers generally allow further unmuted JS-triggered playback for the rest of it, so the forced-mute rule above stops applying from that point on (a fresh reload resets it - browsers don't know or care what a past session did).",[112,1126,1112,1127,1130],{},[1086,1128,1129],{},"real user gesture"," is exempt from the policy entirely, and always follows the shared preference immediately, even before any gesture-less autoplay would've been allowed to (the gesture itself is what a browser needs, and it's happening right here) - and if that preference happens to be unmuted, this is itself one of the triggers above that lifts the forced-mute rule for the rest of the session, no explicit mute-button press required:",[1097,1132,1133,1139],{},[1100,1134,1135,1136,1138],{},"Clicking a lazy ",[89,1137,413],{},"'s placeholder for the first time.",[1100,1140,1141,1143,1144,1147],{},[89,1142,614],{},"'s idle-click-to-resume and ",[89,1145,1146],{},"video-toggle"," window event.",[112,1149,1150,1155,1156,1073,1159,1162,1163,1167],{},[1086,1151,1152,1154],{},[89,1153,614],{},"'s playlist skip\u002Fauto-advance is the one exception to \"follow the shared preference\"",": ",[89,1157,1158],{},"playNext",[89,1160,1161],{},"playPrevious"," carry the ",[1164,1165,1166],"em",{},"outgoing"," video's own live mute\u002Fvolume state forward to the next one, rather than the shared preference. This is the feed convention (TikTok\u002FReels-style), not the single-video-click convention: within one continuous playlist, audio should stick to whatever's already playing - skipping past a video you never unmuted shouldn't spontaneously turn sound on just because nothing's ever been saved globally, and skipping past one you did unmute shouldn't silently mute the next one either.",[112,1169,1170,1171,1073,1173,1175,1176,1073,1178,1180,1181,1184],{},"An explicit ",[89,1172,1072],{},[89,1174,1076],{}," set on a specific ",[89,1177,413],{},[89,1179,604],{}," (or a specific playlist ",[89,1182,1183],{},"VideoEntry",") always wins over all of the above, in every case.",[69,1186,1188],{"id":1187},"building-your-own-controls","Building your own controls",[112,1190,1022,1191,1193,1194,1198,1199,1202,1203,1206,1207,1210,1211,1214],{},[89,1192,300],{}," to render a bare player with no built-in HUD, then build your own from the ",[455,1195,1197],{"href":1196},"\u002Fvideo-player\u002Fapi#headless-controls","headless control components"," (",[89,1200,1201],{},"PlayButton",", ",[89,1204,1205],{},"Scrubber",", etc.) or drive it entirely via a template ref's imperative methods. ",[89,1208,1209],{},"useForwardedPlayer"," lets you forward that same API through your own wrapper component - see the ",[455,1212,40],{"href":1213},"\u002Fvideo-player\u002Fapi#useforwardedplayer"," for both.",[112,1216,1217,1218,1221,1222,1225,1226,1230],{},"The built-in controls popup width defaults to ",[89,1219,1220],{},"min(450px, calc(100% - 32px))"," and can be overridden via the ",[89,1223,1224],{},"--mlv-controls-width"," CSS variable - see the ",[455,1227,1229],{"href":1228},"\u002Fvideo-player\u002Fapi#themeable-css-variables","themeable CSS variables"," section for the full list.",[1232,1233,1234],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":87,"searchDepth":141,"depth":141,"links":1236},[1237,1242,1243,1244,1245,1246,1247,1248,1249],{"id":71,"depth":141,"text":72,"children":1238},[1239,1240,1241],{"id":79,"depth":170,"text":80},{"id":109,"depth":170,"text":110},{"id":281,"depth":170,"text":282},{"id":460,"depth":141,"text":461},{"id":473,"depth":141,"text":474},{"id":573,"depth":141,"text":574},{"id":645,"depth":141,"text":646},{"id":921,"depth":141,"text":922},{"id":1018,"depth":141,"text":1019},{"id":1065,"depth":141,"text":1066},{"id":1187,"depth":141,"text":1188},"Install, mount a video, and read the state-change event stream.","md",null,{},{"icon":38},{"title":35,"description":1250},"NiAw8HYYsxATBKen7vHrA0xDaU-9FI4Vbf0CQpe-Xvg",[1258,1260],{"title":27,"path":28,"stem":32,"description":1259,"icon":33,"children":-1},"A standalone Vue 3 video player - native\u002FHLS\u002FDASH, YouTube\u002FVimeo\u002FDailymotion\u002FBrightcove\u002FJW Player embeds, IMA ads, and Prebid header bidding, behind one API.",{"title":40,"path":41,"stem":42,"description":1261,"icon":43,"children":-1},"Components, props, template-ref methods, and the full state-change event list.",1789409982815]