[{"data":1,"prerenderedAt":2958},["ShallowReactive",2],{"navigation":3,"\u002Fpackages\u002Fplayer":686,"\u002Fpackages\u002Fplayer-surround":2953},[4,31,57,147,168,198,652],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"快速入门","i-lucide-rocket","\u002Fgetting-started","01.getting-started",[10,14,18,22,26],{"title":11,"path":12,"stem":13},"简介","\u002Fgetting-started\u002Fintroduction","01.getting-started\u002F01.introduction",{"title":15,"path":16,"stem":17},"快速开始","\u002Fgetting-started\u002Fquickstart","01.getting-started\u002F02.quickstart",{"title":19,"path":20,"stem":21},"展示作品","\u002Fgetting-started\u002Fshowcase","01.getting-started\u002F03.showcase",{"title":23,"path":24,"stem":25},"示例","\u002Fgetting-started\u002Fexamples","01.getting-started\u002F04.examples",{"title":27,"path":28,"stem":29},"发布视频","\u002Fgetting-started\u002Flaunch-videos","01.getting-started\u002F05.launch-videos",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"核心概念","i-lucide-lightbulb","\u002Fconcepts","02.concepts",[37,41,45,49,53],{"title":38,"path":39,"stem":40},"合成","\u002Fconcepts\u002Fcompositions","02.concepts\u002F01.compositions",{"title":42,"path":43,"stem":44},"数据属性","\u002Fconcepts\u002Fdata-attributes","02.concepts\u002F02.data-attributes",{"title":46,"path":47,"stem":48},"变量","\u002Fconcepts\u002Fvariables","02.concepts\u002F03.variables",{"title":50,"path":51,"stem":52},"帧适配器","\u002Fconcepts\u002Fframe-adapters","02.concepts\u002F04.frame-adapters",{"title":54,"path":55,"stem":56},"确定性渲染","\u002Fconcepts\u002Fdeterminism","02.concepts\u002F05.determinism",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":30},"使用指南","i-lucide-compass","\u002Fguides","03.guides",[63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143],{"title":64,"path":65,"stem":66},"工作流水线","\u002Fguides\u002Fpipeline","03.guides\u002F01.pipeline",{"title":68,"path":69,"stem":70},"HTML-in-Canvas","\u002Fguides\u002Fhtml-in-canvas","03.guides\u002F02.html-in-canvas",{"title":72,"path":73,"stem":74},"网站转视频","\u002Fguides\u002Fwebsite-to-video","03.guides\u002F03.website-to-video",{"title":76,"path":77,"stem":78},"Google Antigravity","\u002Fguides\u002Fantigravity","03.guides\u002F04.antigravity",{"title":80,"path":81,"stem":82},"GitHub Copilot CLI","\u002Fguides\u002Fcopilot-cli","03.guides\u002F05.copilot-cli",{"title":84,"path":85,"stem":86},"Claude Design","\u002Fguides\u002Fclaude-design","03.guides\u002F06.claude-design",{"title":88,"path":89,"stem":90},"Open Design","\u002Fguides\u002Fopen-design","03.guides\u002F07.open-design",{"title":92,"path":93,"stem":94},"提示词指南","\u002Fguides\u002Fprompting","03.guides\u002F08.prompting",{"title":96,"path":97,"stem":98},"Hyperframes vs Remotion","\u002Fguides\u002Fhyperframes-vs-remotion","03.guides\u002F09.hyperframes-vs-remotion",{"title":100,"path":101,"stem":102},"GSAP 动画","\u002Fguides\u002Fgsap-animation","03.guides\u002F10.gsap-animation",{"title":104,"path":105,"stem":106},"渲染","\u002Fguides\u002Frendering","03.guides\u002F11.rendering",{"title":108,"path":109,"stem":110},"去除背景（透明视频）","\u002Fguides\u002Fremove-background","03.guides\u002F12.remove-background",{"title":112,"path":113,"stem":114},"HDR 渲染","\u002Fguides\u002Fhdr","03.guides\u002F13.hdr",{"title":116,"path":117,"stem":118},"4K 渲染","\u002Fguides\u002F4k-rendering","03.guides\u002F14.4k-rendering",{"title":120,"path":121,"stem":122},"性能","\u002Fguides\u002Fperformance","03.guides\u002F15.performance",{"title":124,"path":125,"stem":126},"时间轴编辑","\u002Fguides\u002Ftimeline-editing","03.guides\u002F16.timeline-editing",{"title":128,"path":129,"stem":130},"视频编辑者速查表","\u002Fguides\u002Fvideo-editor-cheatsheet","03.guides\u002F17.video-editor-cheatsheet",{"title":132,"path":133,"stem":134},"常见错误","\u002Fguides\u002Fcommon-mistakes","03.guides\u002F18.common-mistakes",{"title":136,"path":137,"stem":138},"故障排除","\u002Fguides\u002Ftroubleshooting","03.guides\u002F19.troubleshooting",{"title":140,"path":141,"stem":142},"反馈收集","\u002Fguides\u002Ffeedback","03.guides\u002F20.feedback",{"title":144,"path":145,"stem":146},"HyperFrames MCP","\u002Fguides\u002Fmcp","03.guides\u002F21.mcp",{"title":148,"icon":149,"path":150,"stem":151,"children":152,"page":30},"部署","i-lucide-cloud","\u002Fdeploy","04.deploy",[153,156,160,164],{"title":148,"path":154,"stem":155},"\u002Fdeploy\u002Fdeploy","04.deploy\u002F01.deploy",{"title":157,"path":158,"stem":159},"AWS Lambda","\u002Fdeploy\u002Faws-lambda","04.deploy\u002F02.aws-lambda",{"title":161,"path":162,"stem":163},"Lambda 上的模板","\u002Fdeploy\u002Ftemplates-on-lambda","04.deploy\u002F03.templates-on-lambda",{"title":165,"path":166,"stem":167},"迁移到 HyperFrames Lambda","\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda","04.deploy\u002F04.migrating-to-hyperframes-lambda",{"title":169,"icon":170,"path":171,"stem":172,"children":173,"page":30},"包","i-lucide-package","\u002Fpackages","05.packages",[174,178,182,186,190,194],{"title":175,"path":176,"stem":177},"@hyperframes\u002Fcore","\u002Fpackages\u002Fcore","05.packages\u002F01.core",{"title":179,"path":180,"stem":181},"@hyperframes\u002Fengine","\u002Fpackages\u002Fengine","05.packages\u002F02.engine",{"title":183,"path":184,"stem":185},"@hyperframes\u002Fplayer","\u002Fpackages\u002Fplayer","05.packages\u002F03.player",{"title":187,"path":188,"stem":189},"@hyperframes\u002Fproducer","\u002Fpackages\u002Fproducer","05.packages\u002F04.producer",{"title":191,"path":192,"stem":193},"@hyperframes\u002Fstudio","\u002Fpackages\u002Fstudio","05.packages\u002F05.studio",{"title":195,"path":196,"stem":197},"CLI","\u002Fpackages\u002Fcli","05.packages\u002F06.cli",{"title":199,"icon":200,"path":201,"stem":202,"children":203,"page":30},"组件目录","i-lucide-layout-grid","\u002Fcatalog","06.catalog",[204,270,324,358,420,478,512,546,584,598],{"title":205,"icon":206,"path":207,"stem":208,"children":209,"page":30},"字幕","i-lucide-captions","\u002Fcatalog\u002Fcaption","06.catalog\u002F01.caption",[210,214,218,222,226,230,234,238,242,246,250,254,258,262,266],{"title":211,"path":212,"stem":213},"裁剪擦除","\u002Fcatalog\u002Fcaption\u002Fcaption-clip-wipe","06.catalog\u002F01.caption\u002F01.caption-clip-wipe",{"title":215,"path":216,"stem":217},"编辑强调","\u002Fcatalog\u002Fcaption\u002Fcaption-editorial-emphasis","06.catalog\u002F01.caption\u002F02.caption-editorial-emphasis",{"title":219,"path":220,"stem":221},"Emoji 弹出","\u002Fcatalog\u002Fcaption\u002Fcaption-emoji-pop","06.catalog\u002F01.caption\u002F03.caption-emoji-pop",{"title":223,"path":224,"stem":225},"故障 RGB","\u002Fcatalog\u002Fcaption\u002Fcaption-glitch-rgb","06.catalog\u002F01.caption\u002F04.caption-glitch-rgb",{"title":227,"path":228,"stem":229},"渐变填充","\u002Fcatalog\u002Fcaption\u002Fcaption-gradient-fill","06.catalog\u002F01.caption\u002F05.caption-gradient-fill",{"title":231,"path":232,"stem":233},"高亮","\u002Fcatalog\u002Fcaption\u002Fcaption-highlight","06.catalog\u002F01.caption\u002F06.caption-highlight",{"title":235,"path":236,"stem":237},"动感冲击","\u002Fcatalog\u002Fcaption\u002Fcaption-kinetic-slam","06.catalog\u002F01.caption\u002F07.caption-kinetic-slam",{"title":239,"path":240,"stem":241},"矩阵解码","\u002Fcatalog\u002Fcaption\u002Fcaption-matrix-decode","06.catalog\u002F01.caption\u002F08.caption-matrix-decode",{"title":243,"path":244,"stem":245},"霓虹强调","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-accent","06.catalog\u002F01.caption\u002F09.caption-neon-accent",{"title":247,"path":248,"stem":249},"霓虹发光","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-glow","06.catalog\u002F01.caption\u002F10.caption-neon-glow",{"title":251,"path":252,"stem":253},"视差图层","\u002Fcatalog\u002Fcaption\u002Fcaption-parallax-layers","06.catalog\u002F01.caption\u002F11.caption-parallax-layers",{"title":255,"path":256,"stem":257},"粒子爆发","\u002Fcatalog\u002Fcaption\u002Fcaption-particle-burst","06.catalog\u002F01.caption\u002F12.caption-particle-burst",{"title":259,"path":260,"stem":261},"胶囊卡拉OK","\u002Fcatalog\u002Fcaption\u002Fcaption-pill-karaoke","06.catalog\u002F01.caption\u002F13.caption-pill-karaoke",{"title":263,"path":264,"stem":265},"纹理","\u002Fcatalog\u002Fcaption\u002Fcaption-texture","06.catalog\u002F01.caption\u002F14.caption-texture",{"title":267,"path":268,"stem":269},"字重切换","\u002Fcatalog\u002Fcaption\u002Fcaption-weight-shift","06.catalog\u002F01.caption\u002F15.caption-weight-shift",{"title":271,"icon":272,"path":273,"stem":274,"children":275,"page":30},"HTML 画布","i-lucide-layout-dashboard","\u002Fcatalog\u002Fhtml-canvas","06.catalog\u002F02.html-canvas",[276,280,284,288,292,296,300,304,308,312,316,320],{"title":277,"path":278,"stem":279},"iOS 26 Liquid Glass 主屏幕","\u002Fcatalog\u002Fhtml-canvas\u002Fios26-liquid-glass","06.catalog\u002F02.html-canvas\u002F01.ios26-liquid-glass",{"title":281,"path":282,"stem":283},"Liquid Glass 右键菜单","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-context-menu","06.catalog\u002F02.html-canvas\u002F02.liquid-glass-context-menu",{"title":285,"path":286,"stem":287},"Liquid Glass 媒体控制","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-media-controls","06.catalog\u002F02.html-canvas\u002F03.liquid-glass-media-controls",{"title":289,"path":290,"stem":291},"Liquid Glass 通知","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-notification","06.catalog\u002F02.html-canvas\u002F04.liquid-glass-notification",{"title":293,"path":294,"stem":295},"Liquid Glass 小组件","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-widgets","06.catalog\u002F02.html-canvas\u002F05.liquid-glass-widgets",{"title":297,"path":298,"stem":299},"macOS Tahoe Liquid Glass 桌面","\u002Fcatalog\u002Fhtml-canvas\u002Fmacos-tahoe-liquid-glass","06.catalog\u002F02.html-canvas\u002F06.macos-tahoe-liquid-glass",{"title":301,"path":302,"stem":303},"iPhone & MacBook 3D 展示","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-iphone-device","06.catalog\u002F02.html-canvas\u002F07.vfx-iphone-device",{"title":305,"path":306,"stem":307},"液态背景","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-liquid-background","06.catalog\u002F02.html-canvas\u002F08.vfx-liquid-background",{"title":309,"path":310,"stem":311},"磁力效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-magnetic","06.catalog\u002F02.html-canvas\u002F09.vfx-magnetic",{"title":313,"path":314,"stem":315},"传送门","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-portal","06.catalog\u002F02.html-canvas\u002F10.vfx-portal",{"title":317,"path":318,"stem":319},"碎裂效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-shatter","06.catalog\u002F02.html-canvas\u002F11.vfx-shatter",{"title":321,"path":322,"stem":323},"VFX 文字光标","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-text-cursor","06.catalog\u002F02.html-canvas\u002F12.vfx-text-cursor",{"title":325,"icon":326,"path":327,"stem":328,"children":329,"page":30},"社交叠加层","i-lucide-share-2","\u002Fcatalog\u002Fsocial-overlays","06.catalog\u002F03.social-overlays",[330,334,338,342,346,350,354],{"title":331,"path":332,"stem":333},"Instagram 关注","\u002Fcatalog\u002Fsocial-overlays\u002Finstagram-follow","06.catalog\u002F03.social-overlays\u002F01.instagram-follow",{"title":335,"path":336,"stem":337},"macOS 通知","\u002Fcatalog\u002Fsocial-overlays\u002Fmacos-notification","06.catalog\u002F03.social-overlays\u002F02.macos-notification",{"title":339,"path":340,"stem":341},"Reddit 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Freddit-post","06.catalog\u002F03.social-overlays\u002F03.reddit-post",{"title":343,"path":344,"stem":345},"Spotify 正在播放","\u002Fcatalog\u002Fsocial-overlays\u002Fspotify-card","06.catalog\u002F03.social-overlays\u002F04.spotify-card",{"title":347,"path":348,"stem":349},"TikTok 关注","\u002Fcatalog\u002Fsocial-overlays\u002Ftiktok-follow","06.catalog\u002F03.social-overlays\u002F05.tiktok-follow",{"title":351,"path":352,"stem":353},"X 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Fx-post","06.catalog\u002F03.social-overlays\u002F06.x-post",{"title":355,"path":356,"stem":357},"YouTube 下方三分之一","\u002Fcatalog\u002Fsocial-overlays\u002Fyt-lower-third","06.catalog\u002F03.social-overlays\u002F07.yt-lower-third",{"title":359,"icon":360,"path":361,"stem":362,"children":363,"page":30},"着色器过渡","i-lucide-wand-2","\u002Fcatalog\u002Fshader-transitions","06.catalog\u002F04.shader-transitions",[364,368,372,376,380,384,388,392,396,400,404,408,412,416],{"title":365,"path":366,"stem":367},"色散径向分裂","\u002Fcatalog\u002Fshader-transitions\u002Fchromatic-radial-split","06.catalog\u002F04.shader-transitions\u002F01.chromatic-radial-split",{"title":369,"path":370,"stem":371},"电影感变焦","\u002Fcatalog\u002Fshader-transitions\u002Fcinematic-zoom","06.catalog\u002F04.shader-transitions\u002F02.cinematic-zoom",{"title":373,"path":374,"stem":375},"交叉扭曲变形","\u002Fcatalog\u002Fshader-transitions\u002Fcross-warp-morph","06.catalog\u002F04.shader-transitions\u002F03.cross-warp-morph",{"title":377,"path":378,"stem":379},"域扭曲溶解","\u002Fcatalog\u002Fshader-transitions\u002Fdomain-warp-dissolve","06.catalog\u002F04.shader-transitions\u002F04.domain-warp-dissolve",{"title":381,"path":382,"stem":383},"白色闪光过渡","\u002Fcatalog\u002Fshader-transitions\u002Fflash-through-white","06.catalog\u002F04.shader-transitions\u002F05.flash-through-white",{"title":385,"path":386,"stem":387},"故障效果","\u002Fcatalog\u002Fshader-transitions\u002Fglitch","06.catalog\u002F04.shader-transitions\u002F06.glitch",{"title":389,"path":390,"stem":391},"引力透镜","\u002Fcatalog\u002Fshader-transitions\u002Fgravitational-lens","06.catalog\u002F04.shader-transitions\u002F07.gravitational-lens",{"title":393,"path":394,"stem":395},"光线泄漏","\u002Fcatalog\u002Fshader-transitions\u002Flight-leak","06.catalog\u002F04.shader-transitions\u002F08.light-leak",{"title":397,"path":398,"stem":399},"褶皱燃烧","\u002Fcatalog\u002Fshader-transitions\u002Fridged-burn","06.catalog\u002F04.shader-transitions\u002F09.ridged-burn",{"title":401,"path":402,"stem":403},"涟漪波纹","\u002Fcatalog\u002Fshader-transitions\u002Fripple-waves","06.catalog\u002F04.shader-transitions\u002F10.ripple-waves",{"title":405,"path":406,"stem":407},"SDF 光圈","\u002Fcatalog\u002Fshader-transitions\u002Fsdf-iris","06.catalog\u002F04.shader-transitions\u002F11.sdf-iris",{"title":409,"path":410,"stem":411},"漩涡涡流","\u002Fcatalog\u002Fshader-transitions\u002Fswirl-vortex","06.catalog\u002F04.shader-transitions\u002F12.swirl-vortex",{"title":413,"path":414,"stem":415},"热浪扭曲","\u002Fcatalog\u002Fshader-transitions\u002Fthermal-distortion","06.catalog\u002F04.shader-transitions\u002F13.thermal-distortion",{"title":417,"path":418,"stem":419},"快速摇摄","\u002Fcatalog\u002Fshader-transitions\u002Fwhip-pan","06.catalog\u002F04.shader-transitions\u002F14.whip-pan",{"title":421,"icon":422,"path":423,"stem":424,"children":425,"page":30},"CSS 过渡","i-lucide-repeat","\u002Fcatalog\u002Fcss-transitions","06.catalog\u002F05.css-transitions",[426,430,434,438,442,446,450,454,458,462,466,470,474],{"title":427,"path":428,"stem":429},"3D 过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-3d","06.catalog\u002F05.css-transitions\u002F01.transitions-3d",{"title":431,"path":432,"stem":433},"模糊过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-blur","06.catalog\u002F05.css-transitions\u002F02.transitions-blur",{"title":435,"path":436,"stem":437},"覆盖过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-cover","06.catalog\u002F05.css-transitions\u002F03.transitions-cover",{"title":439,"path":440,"stem":441},"破碎过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-destruction","06.catalog\u002F05.css-transitions\u002F04.transitions-destruction",{"title":443,"path":444,"stem":445},"溶解过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-dissolve","06.catalog\u002F05.css-transitions\u002F05.transitions-dissolve",{"title":447,"path":448,"stem":449},"扭曲过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-distortion","06.catalog\u002F05.css-transitions\u002F06.transitions-distortion",{"title":451,"path":452,"stem":453},"网格过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-grid","06.catalog\u002F05.css-transitions\u002F07.transitions-grid",{"title":455,"path":456,"stem":457},"光效过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-light","06.catalog\u002F05.css-transitions\u002F08.transitions-light",{"title":459,"path":460,"stem":461},"机械过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-mechanical","06.catalog\u002F05.css-transitions\u002F09.transitions-mechanical",{"title":463,"path":464,"stem":465},"其他过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-other","06.catalog\u002F05.css-transitions\u002F10.transitions-other",{"title":467,"path":468,"stem":469},"推移过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-push","06.catalog\u002F05.css-transitions\u002F11.transitions-push",{"title":471,"path":472,"stem":473},"径向过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-radial","06.catalog\u002F05.css-transitions\u002F12.transitions-radial",{"title":475,"path":476,"stem":477},"缩放过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-scale","06.catalog\u002F05.css-transitions\u002F13.transitions-scale",{"title":479,"icon":480,"path":481,"stem":482,"children":483,"page":30},"展示","i-lucide-monitor-play","\u002Fcatalog\u002Fshowcase","06.catalog\u002F06.showcase",[484,488,492,496,500,504,508],{"title":485,"path":486,"stem":487},"应用展示","\u002Fcatalog\u002Fshowcase\u002Fapp-showcase","06.catalog\u002F06.showcase\u002F01.app-showcase",{"title":489,"path":490,"stem":491},"Apple 金额计数器","\u002Fcatalog\u002Fshowcase\u002Fapple-money-count","06.catalog\u002F06.showcase\u002F02.apple-money-count",{"title":493,"path":494,"stem":495},"蓝色毛衣开场视频","\u002Fcatalog\u002Fshowcase\u002Fblue-sweater-intro-video","06.catalog\u002F06.showcase\u002F03.blue-sweater-intro-video",{"title":497,"path":498,"stem":499},"朝鲜封锁","\u002Fcatalog\u002Fshowcase\u002Fnorth-korea-locked-down","06.catalog\u002F06.showcase\u002F04.north-korea-locked-down",{"title":501,"path":502,"stem":503},"纽约巴黎航班","\u002Fcatalog\u002Fshowcase\u002Fnyc-paris-flight","06.catalog\u002F06.showcase\u002F05.nyc-paris-flight",{"title":505,"path":506,"stem":507},"3D UI 展示","\u002Fcatalog\u002Fshowcase\u002Fui-3d-reveal","06.catalog\u002F06.showcase\u002F06.ui-3d-reveal",{"title":509,"path":510,"stem":511},"VPN YouTube 广告片段","\u002Fcatalog\u002Fshowcase\u002Fvpn-youtube-spot","06.catalog\u002F06.showcase\u002F07.vpn-youtube-spot",{"title":513,"icon":514,"path":515,"stem":516,"children":517,"page":30},"数据","i-lucide-bar-chart-3","\u002Fcatalog\u002Fdata","06.catalog\u002F07.data",[518,522,526,530,534,538,542],{"title":519,"path":520,"stem":521},"数据图表","\u002Fcatalog\u002Fdata\u002Fdata-chart","06.catalog\u002F07.data\u002F01.data-chart",{"title":523,"path":524,"stem":525},"西班牙地图","\u002Fcatalog\u002Fdata\u002Fspain-map","06.catalog\u002F07.data\u002F02.spain-map",{"title":527,"path":528,"stem":529},"美国地图","\u002Fcatalog\u002Fdata\u002Fus-map","06.catalog\u002F07.data\u002F03.us-map",{"title":531,"path":532,"stem":533},"美国气泡地图","\u002Fcatalog\u002Fdata\u002Fus-map-bubble","06.catalog\u002F07.data\u002F04.us-map-bubble",{"title":535,"path":536,"stem":537},"美国流动地图","\u002Fcatalog\u002Fdata\u002Fus-map-flow","06.catalog\u002F07.data\u002F05.us-map-flow",{"title":539,"path":540,"stem":541},"美国六边形网格地图","\u002Fcatalog\u002Fdata\u002Fus-map-hex","06.catalog\u002F07.data\u002F06.us-map-hex",{"title":543,"path":544,"stem":545},"世界地图","\u002Fcatalog\u002Fdata\u002Fworld-map","06.catalog\u002F07.data\u002F07.world-map",{"title":547,"icon":548,"path":549,"stem":550,"children":551,"page":30},"效果","i-lucide-sparkles","\u002Fcatalog\u002Feffects","06.catalog\u002F08.effects",[552,556,560,564,568,572,576,580],{"title":553,"path":554,"stem":555},"差值混合","\u002Fcatalog\u002Feffects\u002Fcaption-blend-difference","06.catalog\u002F08.effects\u002F01.caption-blend-difference",{"title":557,"path":558,"stem":559},"胶片颗粒叠加","\u002Fcatalog\u002Feffects\u002Fgrain-overlay","06.catalog\u002F08.effects\u002F02.grain-overlay",{"title":561,"path":562,"stem":563},"网格像素化擦除","\u002Fcatalog\u002Feffects\u002Fgrid-pixelate-wipe","06.catalog\u002F08.effects\u002F03.grid-pixelate-wipe",{"title":565,"path":566,"stem":567},"视差缩小","\u002Fcatalog\u002Feffects\u002Fparallax-unzoom","06.catalog\u002F08.effects\u002F04.parallax-unzoom",{"title":569,"path":570,"stem":571},"视差放大","\u002Fcatalog\u002Feffects\u002Fparallax-zoom","06.catalog\u002F08.effects\u002F05.parallax-zoom",{"title":573,"path":574,"stem":575},"微光扫过","\u002Fcatalog\u002Feffects\u002Fshimmer-sweep","06.catalog\u002F08.effects\u002F06.shimmer-sweep",{"title":577,"path":578,"stem":579},"纹理遮罩文字","\u002Fcatalog\u002Feffects\u002Ftexture-mask-text","06.catalog\u002F08.effects\u002F07.texture-mask-text",{"title":581,"path":582,"stem":583},"暗角","\u002Fcatalog\u002Feffects\u002Fvignette","06.catalog\u002F08.effects\u002F08.vignette",{"title":585,"icon":586,"path":587,"stem":588,"children":589,"page":30},"区块","i-lucide-box","\u002Fcatalog\u002Fblocks","06.catalog\u002F09.blocks",[590,594],{"title":591,"path":592,"stem":593},"流程图","\u002Fcatalog\u002Fblocks\u002Fflowchart","06.catalog\u002F09.blocks\u002F01.flowchart",{"title":595,"path":596,"stem":597},"Logo 片尾","\u002Fcatalog\u002Fblocks\u002Flogo-outro","06.catalog\u002F09.blocks\u002F02.logo-outro",{"title":599,"icon":600,"path":601,"stem":602,"children":603,"page":30},"代码片段","i-lucide-code-2","\u002Fcatalog\u002Fcode-snippets","06.catalog\u002F10.code-snippets",[604,608,612,616,620,624,628,632,636,640,644,648],{"title":605,"path":606,"stem":607},"Dark 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-2026","06.catalog\u002F10.code-snippets\u002F01.code-snippet-dark-2026",{"title":609,"path":610,"stem":611},"Dark Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-modern","06.catalog\u002F10.code-snippets\u002F02.code-snippet-dark-modern",{"title":613,"path":614,"stem":615},"Dark+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-plus","06.catalog\u002F10.code-snippets\u002F03.code-snippet-dark-plus",{"title":617,"path":618,"stem":619},"High Contrast","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast","06.catalog\u002F10.code-snippets\u002F04.code-snippet-high-contrast",{"title":621,"path":622,"stem":623},"High Contrast Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast-light","06.catalog\u002F10.code-snippets\u002F05.code-snippet-high-contrast-light",{"title":625,"path":626,"stem":627},"Light 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-2026","06.catalog\u002F10.code-snippets\u002F06.code-snippet-light-2026",{"title":629,"path":630,"stem":631},"Light Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-modern","06.catalog\u002F10.code-snippets\u002F07.code-snippet-light-modern",{"title":633,"path":634,"stem":635},"Light+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-plus","06.catalog\u002F10.code-snippets\u002F08.code-snippet-light-plus",{"title":637,"path":638,"stem":639},"Monokai","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-monokai","06.catalog\u002F10.code-snippets\u002F09.code-snippet-monokai",{"title":641,"path":642,"stem":643},"Solarized Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-solarized-light","06.catalog\u002F10.code-snippets\u002F10.code-snippet-solarized-light",{"title":645,"path":646,"stem":647},"Visual Studio Dark","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-dark","06.catalog\u002F10.code-snippets\u002F11.code-snippet-visual-studio-dark",{"title":649,"path":650,"stem":651},"Visual Studio Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-light","06.catalog\u002F10.code-snippets\u002F12.code-snippet-visual-studio-light",{"title":653,"icon":654,"path":655,"stem":656,"children":657,"page":30},"参考","i-lucide-book-marked","\u002Freference","07.reference",[658,662,666,670,674,678,682],{"title":659,"path":660,"stem":661},"HTML Schema 参考","\u002Freference\u002Fhtml-schema","07.reference\u002F01.html-schema",{"title":663,"path":664,"stem":665},"贡献指南","\u002Freference\u002Fcontributing","07.reference\u002F02.contributing",{"title":667,"path":668,"stem":669},"贡献到 Catalog","\u002Freference\u002Fcatalog","07.reference\u002F03.catalog",{"title":671,"path":672,"stem":673},"发布渠道","\u002Freference\u002Frelease-channels","07.reference\u002F04.release-channels",{"title":675,"path":676,"stem":677},"测试本地 CLI 变更","\u002Freference\u002Ftesting-local-changes","07.reference\u002F05.testing-local-changes",{"title":679,"path":680,"stem":681},"Studio 手动 DOM 编辑","\u002Freference\u002Fstudio-manual-dom-editing","07.reference\u002F06.studio-manual-dom-editing",{"title":683,"path":684,"stem":685},"采用者","\u002Freference\u002Fadopters","07.reference\u002F07.adopters",{"id":687,"title":183,"body":688,"description":2947,"extension":2948,"links":2949,"meta":2950,"navigation":853,"path":184,"seo":2951,"stem":185,"__hash__":2952},"docs\u002F05.packages\u002F03.player.md",{"type":689,"value":690,"toc":2927},"minimark",[691,696,705,730,734,743,756,761,789,791,796,922,929,957,961,985,1016,1020,1181,1185,1192,1424,1427,1795,1885,1888,1892,1987,1991,2091,2094,2243,2247,2266,2375,2387,2537,2541,2544,2813,2859,2862,2865,2885,2892,2895,2901,2924],[692,693,695],"h1",{"id":694},"hyperframesplayer","\"@hyperframes\u002Fplayer\"",[697,698,699,700,704],"p",{},"player 包提供了一个 ",[701,702,703],"code",{},"\u003Chyperframes-player>"," 自定义元素，可以在任何地方嵌入 HyperFrames 合成 — 适用于任何框架或纯 HTML。零依赖，gzip 后仅 3KB。",[706,707,712],"pre",{"className":708,"code":709,"language":710,"meta":711,"style":711},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @hyperframes\u002Fplayer\n","bash","",[701,713,714],{"__ignoreMap":711},[715,716,719,723,727],"span",{"class":717,"line":718},"line",1,[715,720,722],{"class":721},"sBMFI","npm",[715,724,726],{"class":725},"sfazB"," install",[715,728,729],{"class":725}," @hyperframes\u002Fplayer\n",[731,732,733],"h2",{"id":733},"何时使用",[697,735,736],{},[737,738,739,740,742],"strong",{},"在以下场景使用 ",[701,741,183],{},"：",[744,745,746,750,753],"ul",{},[747,748,749],"li",{},"在网站、仪表盘或应用中嵌入渲染后的合成",[747,751,752],{},"在落地页或产品演示中添加类似视频的播放器",[747,754,755],{},"在文档或博客文章中展示合成",[697,757,758],{},[737,759,760],{},"如果需要以下功能，请使用其他包：",[744,762,763,770,780],{},[747,764,765,766],{},"交互式编辑合成 — 使用 ",[767,768,769],"a",{"href":192},"studio",[747,771,772,773,775,776,779],{},"开发期间预览 — 使用 ",[767,774,195],{"href":196},"（",[701,777,778],{},"npx hyperframes preview","）",[747,781,782,783,785,786],{},"渲染为 MP4 — 使用 ",[767,784,195],{"href":196}," 或 ",[767,787,788],{"href":188},"producer",[731,790,15],{"id":15},[792,793,795],"h3",{"id":794},"通过-cdn","通过 CDN",[706,797,801],{"className":798,"code":799,"language":800,"meta":711,"style":711},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@hyperframes\u002Fplayer\">\u003C\u002Fscript>\n\n\u003Chyperframes-player\nsrc=\".\u002Fmy-composition\u002Findex.html\"\ncontrols\nautoplay\nmuted\nstyle=\"width: 100%; max-width: 800px; aspect-ratio: 16\u002F9\"\n>\u003C\u002Fhyperframes-player>\n","html",[701,802,803,848,855,863,879,885,891,897,912],{"__ignoreMap":711},[715,804,805,809,813,817,820,823,826,828,831,833,835,838,840,843,845],{"class":717,"line":718},[715,806,808],{"class":807},"sMK4o","\u003C",[715,810,812],{"class":811},"swJcz","script",[715,814,816],{"class":815},"spNyl"," type",[715,818,819],{"class":807},"=",[715,821,822],{"class":807},"\"",[715,824,825],{"class":725},"module",[715,827,822],{"class":807},[715,829,830],{"class":815}," src",[715,832,819],{"class":807},[715,834,822],{"class":807},[715,836,837],{"class":725},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@hyperframes\u002Fplayer",[715,839,822],{"class":807},[715,841,842],{"class":807},">\u003C\u002F",[715,844,812],{"class":811},[715,846,847],{"class":807},">\n",[715,849,851],{"class":717,"line":850},2,[715,852,854],{"emptyLinePlaceholder":853},true,"\n",[715,856,858,860],{"class":717,"line":857},3,[715,859,808],{"class":807},[715,861,862],{"class":811},"hyperframes-player\n",[715,864,866,869,871,873,876],{"class":717,"line":865},4,[715,867,868],{"class":815},"src",[715,870,819],{"class":807},[715,872,822],{"class":807},[715,874,875],{"class":725},".\u002Fmy-composition\u002Findex.html",[715,877,878],{"class":807},"\"\n",[715,880,882],{"class":717,"line":881},5,[715,883,884],{"class":815},"controls\n",[715,886,888],{"class":717,"line":887},6,[715,889,890],{"class":815},"autoplay\n",[715,892,894],{"class":717,"line":893},7,[715,895,896],{"class":815},"muted\n",[715,898,900,903,905,907,910],{"class":717,"line":899},8,[715,901,902],{"class":815},"style",[715,904,819],{"class":807},[715,906,822],{"class":807},[715,908,909],{"class":725},"width: 100%; max-width: 800px; aspect-ratio: 16\u002F9",[715,911,878],{"class":807},[715,913,915,917,920],{"class":717,"line":914},9,[715,916,842],{"class":807},[715,918,919],{"class":811},"hyperframes-player",[715,921,847],{"class":807},[697,923,924,925,928],{},"如果需要使用传统 ",[701,926,927],{},"\u003Cscript>"," 标签而非 ESM，可以使用显式的全局构建版本：",[706,930,932],{"className":798,"code":931,"language":800,"meta":711,"style":711},"\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@hyperframes\u002Fplayer\u002Fdist\u002Fhyperframes-player.global.js\">\u003C\u002Fscript>\n",[701,933,934],{"__ignoreMap":711},[715,935,936,938,940,942,944,946,949,951,953,955],{"class":717,"line":718},[715,937,808],{"class":807},[715,939,812],{"class":811},[715,941,830],{"class":815},[715,943,819],{"class":807},[715,945,822],{"class":807},[715,947,948],{"class":725},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@hyperframes\u002Fplayer\u002Fdist\u002Fhyperframes-player.global.js",[715,950,822],{"class":807},[715,952,842],{"class":807},[715,954,812],{"class":811},[715,956,847],{"class":807},[792,958,960],{"id":959},"通过-npm","通过 npm",[706,962,966],{"className":963,"code":964,"language":965,"meta":711,"style":711},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import '@hyperframes\u002Fplayer';\n","js",[701,967,968],{"__ignoreMap":711},[715,969,970,974,977,979,982],{"class":717,"line":718},[715,971,973],{"class":972},"s7zQu","import",[715,975,976],{"class":807}," '",[715,978,183],{"class":725},[715,980,981],{"class":807},"'",[715,983,984],{"class":807},";\n",[706,986,988],{"className":798,"code":987,"language":800,"meta":711,"style":711},"\u003Chyperframes-player src=\"\u002Fcompositions\u002Fintro.html\" controls>\u003C\u002Fhyperframes-player>\n",[701,989,990],{"__ignoreMap":711},[715,991,992,994,996,998,1000,1002,1005,1007,1010,1012,1014],{"class":717,"line":718},[715,993,808],{"class":807},[715,995,919],{"class":811},[715,997,830],{"class":815},[715,999,819],{"class":807},[715,1001,822],{"class":807},[715,1003,1004],{"class":725},"\u002Fcompositions\u002Fintro.html",[715,1006,822],{"class":807},[715,1008,1009],{"class":815}," controls",[715,1011,842],{"class":807},[715,1013,919],{"class":811},[715,1015,847],{"class":807},[731,1017,1019],{"id":1018},"html-属性","HTML 属性",[1021,1022,1023,1042],"table",{},[1024,1025,1026],"thead",{},[1027,1028,1029,1033,1036,1039],"tr",{},[1030,1031,1032],"th",{},"属性",[1030,1034,1035],{},"类型",[1030,1037,1038],{},"默认值",[1030,1040,1041],{},"描述",[1043,1044,1045,1061,1077,1092,1108,1122,1136,1151,1166],"tbody",{},[1027,1046,1047,1052,1055,1058],{},[1048,1049,1050],"td",{},[701,1051,868],{},[1048,1053,1054],{},"string",[1048,1056,1057],{},"必需",[1048,1059,1060],{},"合成 HTML 的 URL 或相对路径",[1027,1062,1063,1068,1071,1074],{},[1048,1064,1065],{},[701,1066,1067],{},"width",[1048,1069,1070],{},"number",[1048,1072,1073],{},"1920",[1048,1075,1076],{},"合成宽度（像素）",[1027,1078,1079,1084,1086,1089],{},[1048,1080,1081],{},[701,1082,1083],{},"height",[1048,1085,1070],{},[1048,1087,1088],{},"1080",[1048,1090,1091],{},"合成高度（像素）",[1027,1093,1094,1099,1102,1105],{},[1048,1095,1096],{},[701,1097,1098],{},"controls",[1048,1100,1101],{},"boolean",[1048,1103,1104],{},"false",[1048,1106,1107],{},"显示播放控制覆盖层",[1027,1109,1110,1115,1117,1119],{},[1048,1111,1112],{},[701,1113,1114],{},"autoplay",[1048,1116,1101],{},[1048,1118,1104],{},[1048,1120,1121],{},"加载后自动播放",[1027,1123,1124,1129,1131,1133],{},[1048,1125,1126],{},[701,1127,1128],{},"loop",[1048,1130,1101],{},[1048,1132,1104],{},[1048,1134,1135],{},"循环播放",[1027,1137,1138,1143,1145,1148],{},[1048,1139,1140],{},[701,1141,1142],{},"muted",[1048,1144,1101],{},[1048,1146,1147],{},"true",[1048,1149,1150],{},"静音音频（大多数浏览器自动播放时需要）",[1027,1152,1153,1158,1160,1163],{},[1048,1154,1155],{},[701,1156,1157],{},"poster",[1048,1159,1054],{},[1048,1161,1162],{},"—",[1048,1164,1165],{},"首次播放前显示的图片 URL",[1027,1167,1168,1173,1175,1178],{},[1048,1169,1170],{},[701,1171,1172],{},"playback-rate",[1048,1174,1070],{},[1048,1176,1177],{},"1",[1048,1179,1180],{},"播放速度倍率",[731,1182,1184],{"id":1183},"javascript-api","JavaScript API",[697,1186,1187,1188,1191],{},"player 镜像了原生 ",[701,1189,1190],{},"\u003Cvideo>"," 元素的 API：",[706,1193,1195],{"className":963,"code":1194,"language":965,"meta":711,"style":711},"const player = document.querySelector('hyperframes-player');\n\n\u002F\u002F 播放控制\nplayer.play();\nplayer.pause();\nplayer.seek(2.5); \u002F\u002F 跳转到 2.5 秒\n\n\u002F\u002F 属性\nplayer.currentTime;     \u002F\u002F number — 当前位置（秒）\nplayer.currentTime = 5; \u002F\u002F 跳转到 5 秒\nplayer.duration;        \u002F\u002F number — 总时长\nplayer.paused;          \u002F\u002F boolean\nplayer.ready;           \u002F\u002F boolean — 合成加载后为 true\nplayer.playbackRate;    \u002F\u002F number — 获取\u002F设置速度\nplayer.muted;           \u002F\u002F boolean — 获取\u002F设置静音\nplayer.loop;            \u002F\u002F boolean — 获取\u002F设置循环\n",[701,1196,1197,1232,1236,1242,1257,1270,1293,1297,1302,1316,1336,1351,1366,1381,1396,1410],{"__ignoreMap":711},[715,1198,1199,1202,1206,1208,1211,1214,1218,1221,1223,1225,1227,1230],{"class":717,"line":718},[715,1200,1201],{"class":815},"const",[715,1203,1205],{"class":1204},"sTEyZ"," player ",[715,1207,819],{"class":807},[715,1209,1210],{"class":1204}," document",[715,1212,1213],{"class":807},".",[715,1215,1217],{"class":1216},"s2Zo4","querySelector",[715,1219,1220],{"class":1204},"(",[715,1222,981],{"class":807},[715,1224,919],{"class":725},[715,1226,981],{"class":807},[715,1228,1229],{"class":1204},")",[715,1231,984],{"class":807},[715,1233,1234],{"class":717,"line":850},[715,1235,854],{"emptyLinePlaceholder":853},[715,1237,1238],{"class":717,"line":857},[715,1239,1241],{"class":1240},"sHwdD","\u002F\u002F 播放控制\n",[715,1243,1244,1247,1249,1252,1255],{"class":717,"line":865},[715,1245,1246],{"class":1204},"player",[715,1248,1213],{"class":807},[715,1250,1251],{"class":1216},"play",[715,1253,1254],{"class":1204},"()",[715,1256,984],{"class":807},[715,1258,1259,1261,1263,1266,1268],{"class":717,"line":881},[715,1260,1246],{"class":1204},[715,1262,1213],{"class":807},[715,1264,1265],{"class":1216},"pause",[715,1267,1254],{"class":1204},[715,1269,984],{"class":807},[715,1271,1272,1274,1276,1279,1281,1285,1287,1290],{"class":717,"line":887},[715,1273,1246],{"class":1204},[715,1275,1213],{"class":807},[715,1277,1278],{"class":1216},"seek",[715,1280,1220],{"class":1204},[715,1282,1284],{"class":1283},"sbssI","2.5",[715,1286,1229],{"class":1204},[715,1288,1289],{"class":807},";",[715,1291,1292],{"class":1240}," \u002F\u002F 跳转到 2.5 秒\n",[715,1294,1295],{"class":717,"line":893},[715,1296,854],{"emptyLinePlaceholder":853},[715,1298,1299],{"class":717,"line":899},[715,1300,1301],{"class":1240},"\u002F\u002F 属性\n",[715,1303,1304,1306,1308,1311,1313],{"class":717,"line":914},[715,1305,1246],{"class":1204},[715,1307,1213],{"class":807},[715,1309,1310],{"class":1204},"currentTime",[715,1312,1289],{"class":807},[715,1314,1315],{"class":1240},"     \u002F\u002F number — 当前位置（秒）\n",[715,1317,1319,1321,1323,1326,1328,1331,1333],{"class":717,"line":1318},10,[715,1320,1246],{"class":1204},[715,1322,1213],{"class":807},[715,1324,1325],{"class":1204},"currentTime ",[715,1327,819],{"class":807},[715,1329,1330],{"class":1283}," 5",[715,1332,1289],{"class":807},[715,1334,1335],{"class":1240}," \u002F\u002F 跳转到 5 秒\n",[715,1337,1339,1341,1343,1346,1348],{"class":717,"line":1338},11,[715,1340,1246],{"class":1204},[715,1342,1213],{"class":807},[715,1344,1345],{"class":1204},"duration",[715,1347,1289],{"class":807},[715,1349,1350],{"class":1240},"        \u002F\u002F number — 总时长\n",[715,1352,1354,1356,1358,1361,1363],{"class":717,"line":1353},12,[715,1355,1246],{"class":1204},[715,1357,1213],{"class":807},[715,1359,1360],{"class":1204},"paused",[715,1362,1289],{"class":807},[715,1364,1365],{"class":1240},"          \u002F\u002F boolean\n",[715,1367,1369,1371,1373,1376,1378],{"class":717,"line":1368},13,[715,1370,1246],{"class":1204},[715,1372,1213],{"class":807},[715,1374,1375],{"class":1204},"ready",[715,1377,1289],{"class":807},[715,1379,1380],{"class":1240},"           \u002F\u002F boolean — 合成加载后为 true\n",[715,1382,1384,1386,1388,1391,1393],{"class":717,"line":1383},14,[715,1385,1246],{"class":1204},[715,1387,1213],{"class":807},[715,1389,1390],{"class":1204},"playbackRate",[715,1392,1289],{"class":807},[715,1394,1395],{"class":1240},"    \u002F\u002F number — 获取\u002F设置速度\n",[715,1397,1399,1401,1403,1405,1407],{"class":717,"line":1398},15,[715,1400,1246],{"class":1204},[715,1402,1213],{"class":807},[715,1404,1142],{"class":1204},[715,1406,1289],{"class":807},[715,1408,1409],{"class":1240},"           \u002F\u002F boolean — 获取\u002F设置静音\n",[715,1411,1413,1415,1417,1419,1421],{"class":717,"line":1412},16,[715,1414,1246],{"class":1204},[715,1416,1213],{"class":807},[715,1418,1128],{"class":1204},[715,1420,1289],{"class":807},[715,1422,1423],{"class":1240},"            \u002F\u002F boolean — 获取\u002F设置循环\n",[731,1425,1426],{"id":1426},"事件",[706,1428,1430],{"className":963,"code":1429,"language":965,"meta":711,"style":711},"const player = document.querySelector('hyperframes-player');\n\nplayer.addEventListener('ready', (e) => {\nconsole.log('Duration:', e.detail.duration);\n});\n\nplayer.addEventListener('timeupdate', (e) => {\nconsole.log('Time:', e.detail.currentTime);\n});\n\nplayer.addEventListener('play', () => console.log('Playing'));\nplayer.addEventListener('pause', () => console.log('Paused'));\nplayer.addEventListener('ended', () => console.log('Ended'));\nplayer.addEventListener('error', (e) => console.error(e.detail.message));\n",[701,1431,1432,1458,1462,1497,1534,1543,1547,1576,1609,1617,1621,1665,1706,1748],{"__ignoreMap":711},[715,1433,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456],{"class":717,"line":718},[715,1435,1201],{"class":815},[715,1437,1205],{"class":1204},[715,1439,819],{"class":807},[715,1441,1210],{"class":1204},[715,1443,1213],{"class":807},[715,1445,1217],{"class":1216},[715,1447,1220],{"class":1204},[715,1449,981],{"class":807},[715,1451,919],{"class":725},[715,1453,981],{"class":807},[715,1455,1229],{"class":1204},[715,1457,984],{"class":807},[715,1459,1460],{"class":717,"line":850},[715,1461,854],{"emptyLinePlaceholder":853},[715,1463,1464,1466,1468,1471,1473,1475,1477,1479,1482,1485,1489,1491,1494],{"class":717,"line":857},[715,1465,1246],{"class":1204},[715,1467,1213],{"class":807},[715,1469,1470],{"class":1216},"addEventListener",[715,1472,1220],{"class":1204},[715,1474,981],{"class":807},[715,1476,1375],{"class":725},[715,1478,981],{"class":807},[715,1480,1481],{"class":807},",",[715,1483,1484],{"class":807}," (",[715,1486,1488],{"class":1487},"sHdIc","e",[715,1490,1229],{"class":807},[715,1492,1493],{"class":815}," =>",[715,1495,1496],{"class":807}," {\n",[715,1498,1499,1502,1504,1507,1509,1511,1514,1516,1518,1521,1523,1526,1528,1530,1532],{"class":717,"line":865},[715,1500,1501],{"class":1204},"console",[715,1503,1213],{"class":807},[715,1505,1506],{"class":1216},"log",[715,1508,1220],{"class":811},[715,1510,981],{"class":807},[715,1512,1513],{"class":725},"Duration:",[715,1515,981],{"class":807},[715,1517,1481],{"class":807},[715,1519,1520],{"class":1204}," e",[715,1522,1213],{"class":807},[715,1524,1525],{"class":1204},"detail",[715,1527,1213],{"class":807},[715,1529,1345],{"class":1204},[715,1531,1229],{"class":811},[715,1533,984],{"class":807},[715,1535,1536,1539,1541],{"class":717,"line":881},[715,1537,1538],{"class":807},"}",[715,1540,1229],{"class":1204},[715,1542,984],{"class":807},[715,1544,1545],{"class":717,"line":887},[715,1546,854],{"emptyLinePlaceholder":853},[715,1548,1549,1551,1553,1555,1557,1559,1562,1564,1566,1568,1570,1572,1574],{"class":717,"line":893},[715,1550,1246],{"class":1204},[715,1552,1213],{"class":807},[715,1554,1470],{"class":1216},[715,1556,1220],{"class":1204},[715,1558,981],{"class":807},[715,1560,1561],{"class":725},"timeupdate",[715,1563,981],{"class":807},[715,1565,1481],{"class":807},[715,1567,1484],{"class":807},[715,1569,1488],{"class":1487},[715,1571,1229],{"class":807},[715,1573,1493],{"class":815},[715,1575,1496],{"class":807},[715,1577,1578,1580,1582,1584,1586,1588,1591,1593,1595,1597,1599,1601,1603,1605,1607],{"class":717,"line":899},[715,1579,1501],{"class":1204},[715,1581,1213],{"class":807},[715,1583,1506],{"class":1216},[715,1585,1220],{"class":811},[715,1587,981],{"class":807},[715,1589,1590],{"class":725},"Time:",[715,1592,981],{"class":807},[715,1594,1481],{"class":807},[715,1596,1520],{"class":1204},[715,1598,1213],{"class":807},[715,1600,1525],{"class":1204},[715,1602,1213],{"class":807},[715,1604,1310],{"class":1204},[715,1606,1229],{"class":811},[715,1608,984],{"class":807},[715,1610,1611,1613,1615],{"class":717,"line":914},[715,1612,1538],{"class":807},[715,1614,1229],{"class":1204},[715,1616,984],{"class":807},[715,1618,1619],{"class":717,"line":1318},[715,1620,854],{"emptyLinePlaceholder":853},[715,1622,1623,1625,1627,1629,1631,1633,1635,1637,1639,1642,1644,1647,1649,1651,1653,1655,1658,1660,1663],{"class":717,"line":1338},[715,1624,1246],{"class":1204},[715,1626,1213],{"class":807},[715,1628,1470],{"class":1216},[715,1630,1220],{"class":1204},[715,1632,981],{"class":807},[715,1634,1251],{"class":725},[715,1636,981],{"class":807},[715,1638,1481],{"class":807},[715,1640,1641],{"class":807}," ()",[715,1643,1493],{"class":815},[715,1645,1646],{"class":1204}," console",[715,1648,1213],{"class":807},[715,1650,1506],{"class":1216},[715,1652,1220],{"class":1204},[715,1654,981],{"class":807},[715,1656,1657],{"class":725},"Playing",[715,1659,981],{"class":807},[715,1661,1662],{"class":1204},"))",[715,1664,984],{"class":807},[715,1666,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697,1700,1702,1704],{"class":717,"line":1353},[715,1668,1246],{"class":1204},[715,1670,1213],{"class":807},[715,1672,1470],{"class":1216},[715,1674,1220],{"class":1204},[715,1676,981],{"class":807},[715,1678,1265],{"class":725},[715,1680,981],{"class":807},[715,1682,1481],{"class":807},[715,1684,1641],{"class":807},[715,1686,1493],{"class":815},[715,1688,1646],{"class":1204},[715,1690,1213],{"class":807},[715,1692,1506],{"class":1216},[715,1694,1220],{"class":1204},[715,1696,981],{"class":807},[715,1698,1699],{"class":725},"Paused",[715,1701,981],{"class":807},[715,1703,1662],{"class":1204},[715,1705,984],{"class":807},[715,1707,1708,1710,1712,1714,1716,1718,1721,1723,1725,1727,1729,1731,1733,1735,1737,1739,1742,1744,1746],{"class":717,"line":1368},[715,1709,1246],{"class":1204},[715,1711,1213],{"class":807},[715,1713,1470],{"class":1216},[715,1715,1220],{"class":1204},[715,1717,981],{"class":807},[715,1719,1720],{"class":725},"ended",[715,1722,981],{"class":807},[715,1724,1481],{"class":807},[715,1726,1641],{"class":807},[715,1728,1493],{"class":815},[715,1730,1646],{"class":1204},[715,1732,1213],{"class":807},[715,1734,1506],{"class":1216},[715,1736,1220],{"class":1204},[715,1738,981],{"class":807},[715,1740,1741],{"class":725},"Ended",[715,1743,981],{"class":807},[715,1745,1662],{"class":1204},[715,1747,984],{"class":807},[715,1749,1750,1752,1754,1756,1758,1760,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1784,1786,1788,1790,1793],{"class":717,"line":1383},[715,1751,1246],{"class":1204},[715,1753,1213],{"class":807},[715,1755,1470],{"class":1216},[715,1757,1220],{"class":1204},[715,1759,981],{"class":807},[715,1761,1762],{"class":725},"error",[715,1764,981],{"class":807},[715,1766,1481],{"class":807},[715,1768,1484],{"class":807},[715,1770,1488],{"class":1487},[715,1772,1229],{"class":807},[715,1774,1493],{"class":815},[715,1776,1646],{"class":1204},[715,1778,1213],{"class":807},[715,1780,1762],{"class":1216},[715,1782,1783],{"class":1204},"(e",[715,1785,1213],{"class":807},[715,1787,1525],{"class":1204},[715,1789,1213],{"class":807},[715,1791,1792],{"class":1204},"message))",[715,1794,984],{"class":807},[1021,1796,1797,1808],{},[1024,1798,1799],{},[1027,1800,1801,1803,1806],{},[1030,1802,1426],{},[1030,1804,1805],{},"Detail",[1030,1807,1041],{},[1043,1809,1810,1824,1838,1849,1860,1871],{},[1027,1811,1812,1816,1821],{},[1048,1813,1814],{},[701,1815,1375],{},[1048,1817,1818],{},[701,1819,1820],{},"{ duration }",[1048,1822,1823],{},"合成已加载并发现时间轴",[1027,1825,1826,1830,1835],{},[1048,1827,1828],{},[701,1829,1561],{},[1048,1831,1832],{},[701,1833,1834],{},"{ currentTime }",[1048,1836,1837],{},"播放期间触发（约 30fps）",[1027,1839,1840,1844,1846],{},[1048,1841,1842],{},[701,1843,1251],{},[1048,1845,1162],{},[1048,1847,1848],{},"播放已开始",[1027,1850,1851,1855,1857],{},[1048,1852,1853],{},[701,1854,1265],{},[1048,1856,1162],{},[1048,1858,1859],{},"播放已暂停",[1027,1861,1862,1866,1868],{},[1048,1863,1864],{},[701,1865,1720],{},[1048,1867,1162],{},[1048,1869,1870],{},"播放已到达末尾",[1027,1872,1873,1877,1882],{},[1048,1874,1875],{},[701,1876,1762],{},[1048,1878,1879],{},[701,1880,1881],{},"{ message }",[1048,1883,1884],{},"加载或运行时错误",[731,1886,1887],{"id":1887},"框架示例",[792,1889,1891],{"id":1890},"react","React",[706,1893,1897],{"className":1894,"code":1895,"language":1896,"meta":711,"style":711},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import '@hyperframes\u002Fplayer';\n\nfunction VideoPreview({ src }) {\nreturn (\n\u003Chyperframes-player\nsrc={src}\ncontrols\nstyle=\"\"\n\u002F>\n);\n}\n","jsx",[701,1898,1899,1911,1915,1933,1941,1947,1959,1963,1972,1977,1983],{"__ignoreMap":711},[715,1900,1901,1903,1905,1907,1909],{"class":717,"line":718},[715,1902,973],{"class":972},[715,1904,976],{"class":807},[715,1906,183],{"class":725},[715,1908,981],{"class":807},[715,1910,984],{"class":807},[715,1912,1913],{"class":717,"line":850},[715,1914,854],{"emptyLinePlaceholder":853},[715,1916,1917,1920,1923,1926,1928,1931],{"class":717,"line":857},[715,1918,1919],{"class":815},"function",[715,1921,1922],{"class":1216}," VideoPreview",[715,1924,1925],{"class":807},"({",[715,1927,830],{"class":1487},[715,1929,1930],{"class":807}," })",[715,1932,1496],{"class":807},[715,1934,1935,1938],{"class":717,"line":865},[715,1936,1937],{"class":972},"return",[715,1939,1940],{"class":811}," (\n",[715,1942,1943,1945],{"class":717,"line":881},[715,1944,808],{"class":807},[715,1946,862],{"class":721},[715,1948,1949,1951,1954,1956],{"class":717,"line":887},[715,1950,868],{"class":815},[715,1952,1953],{"class":807},"={",[715,1955,868],{"class":1204},[715,1957,1958],{"class":807},"}\n",[715,1960,1961],{"class":717,"line":893},[715,1962,884],{"class":815},[715,1964,1965,1967,1969],{"class":717,"line":899},[715,1966,902],{"class":815},[715,1968,819],{"class":807},[715,1970,1971],{"class":807},"\"\"\n",[715,1973,1974],{"class":717,"line":914},[715,1975,1976],{"class":807},"\u002F>\n",[715,1978,1979,1981],{"class":717,"line":1318},[715,1980,1229],{"class":811},[715,1982,984],{"class":807},[715,1984,1985],{"class":717,"line":1338},[715,1986,1958],{"class":807},[792,1988,1990],{"id":1989},"vue","Vue",[706,1992,1995],{"className":1993,"code":1994,"language":1989,"meta":711,"style":711},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n\u003Chyperframes-player :src=\"compositionUrl\" controls \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport '@hyperframes\u002Fplayer';\nconst compositionUrl = '.\u002Fcompositions\u002Fintro.html';\n\u003C\u002Fscript>\n",[701,1996,1997,2006,2029,2038,2042,2053,2065,2083],{"__ignoreMap":711},[715,1998,1999,2001,2004],{"class":717,"line":718},[715,2000,808],{"class":807},[715,2002,2003],{"class":811},"template",[715,2005,847],{"class":807},[715,2007,2008,2010,2012,2015,2017,2019,2022,2024,2026],{"class":717,"line":850},[715,2009,808],{"class":807},[715,2011,919],{"class":811},[715,2013,2014],{"class":815}," :src",[715,2016,819],{"class":807},[715,2018,822],{"class":807},[715,2020,2021],{"class":725},"compositionUrl",[715,2023,822],{"class":807},[715,2025,1009],{"class":815},[715,2027,2028],{"class":807}," \u002F>\n",[715,2030,2031,2034,2036],{"class":717,"line":857},[715,2032,2033],{"class":807},"\u003C\u002F",[715,2035,2003],{"class":811},[715,2037,847],{"class":807},[715,2039,2040],{"class":717,"line":865},[715,2041,854],{"emptyLinePlaceholder":853},[715,2043,2044,2046,2048,2051],{"class":717,"line":881},[715,2045,808],{"class":807},[715,2047,812],{"class":811},[715,2049,2050],{"class":815}," setup",[715,2052,847],{"class":807},[715,2054,2055,2057,2059,2061,2063],{"class":717,"line":887},[715,2056,973],{"class":972},[715,2058,976],{"class":807},[715,2060,183],{"class":725},[715,2062,981],{"class":807},[715,2064,984],{"class":807},[715,2066,2067,2069,2072,2074,2076,2079,2081],{"class":717,"line":893},[715,2068,1201],{"class":815},[715,2070,2071],{"class":1204}," compositionUrl ",[715,2073,819],{"class":807},[715,2075,976],{"class":807},[715,2077,2078],{"class":725},".\u002Fcompositions\u002Fintro.html",[715,2080,981],{"class":807},[715,2082,984],{"class":807},[715,2084,2085,2087,2089],{"class":717,"line":899},[715,2086,2033],{"class":807},[715,2088,812],{"class":811},[715,2090,847],{"class":807},[792,2092,2093],{"id":2093},"编程方式",[706,2095,2097],{"className":963,"code":2096,"language":965,"meta":711,"style":711},"import '@hyperframes\u002Fplayer';\n\nconst player = document.createElement('hyperframes-player');\nplayer.src = '.\u002Fmy-composition\u002Findex.html';\nplayer.controls = true;\nplayer.addEventListener('ready', () => player.play());\ndocument.getElementById('player-container').appendChild(player);\n",[701,2098,2099,2111,2115,2142,2161,2178,2212],{"__ignoreMap":711},[715,2100,2101,2103,2105,2107,2109],{"class":717,"line":718},[715,2102,973],{"class":972},[715,2104,976],{"class":807},[715,2106,183],{"class":725},[715,2108,981],{"class":807},[715,2110,984],{"class":807},[715,2112,2113],{"class":717,"line":850},[715,2114,854],{"emptyLinePlaceholder":853},[715,2116,2117,2119,2121,2123,2125,2127,2130,2132,2134,2136,2138,2140],{"class":717,"line":857},[715,2118,1201],{"class":815},[715,2120,1205],{"class":1204},[715,2122,819],{"class":807},[715,2124,1210],{"class":1204},[715,2126,1213],{"class":807},[715,2128,2129],{"class":1216},"createElement",[715,2131,1220],{"class":1204},[715,2133,981],{"class":807},[715,2135,919],{"class":725},[715,2137,981],{"class":807},[715,2139,1229],{"class":1204},[715,2141,984],{"class":807},[715,2143,2144,2146,2148,2151,2153,2155,2157,2159],{"class":717,"line":865},[715,2145,1246],{"class":1204},[715,2147,1213],{"class":807},[715,2149,2150],{"class":1204},"src ",[715,2152,819],{"class":807},[715,2154,976],{"class":807},[715,2156,875],{"class":725},[715,2158,981],{"class":807},[715,2160,984],{"class":807},[715,2162,2163,2165,2167,2170,2172,2176],{"class":717,"line":881},[715,2164,1246],{"class":1204},[715,2166,1213],{"class":807},[715,2168,2169],{"class":1204},"controls ",[715,2171,819],{"class":807},[715,2173,2175],{"class":2174},"sfNiH"," true",[715,2177,984],{"class":807},[715,2179,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198,2200,2203,2205,2207,2210],{"class":717,"line":887},[715,2181,1246],{"class":1204},[715,2183,1213],{"class":807},[715,2185,1470],{"class":1216},[715,2187,1220],{"class":1204},[715,2189,981],{"class":807},[715,2191,1375],{"class":725},[715,2193,981],{"class":807},[715,2195,1481],{"class":807},[715,2197,1641],{"class":807},[715,2199,1493],{"class":815},[715,2201,2202],{"class":1204}," player",[715,2204,1213],{"class":807},[715,2206,1251],{"class":1216},[715,2208,2209],{"class":1204},"())",[715,2211,984],{"class":807},[715,2213,2214,2217,2219,2222,2224,2226,2229,2231,2233,2235,2238,2241],{"class":717,"line":893},[715,2215,2216],{"class":1204},"document",[715,2218,1213],{"class":807},[715,2220,2221],{"class":1216},"getElementById",[715,2223,1220],{"class":1204},[715,2225,981],{"class":807},[715,2227,2228],{"class":725},"player-container",[715,2230,981],{"class":807},[715,2232,1229],{"class":1204},[715,2234,1213],{"class":807},[715,2236,2237],{"class":1216},"appendChild",[715,2239,2240],{"class":1204},"(player)",[715,2242,984],{"class":807},[731,2244,2246],{"id":2245},"进阶iframe-访问","进阶：iframe 访问",[697,2248,2249,2250,2253,2254,2257,2258,2261,2262,2265],{},"合成运行在 player Shadow DOM 容器内的沙盒 ",[701,2251,2252],{},"\u003Ciframe>"," 中。对于大多数用例，你不需要直接访问 — 上面的 JavaScript API 和事件已经足够。但如果你正在构建编辑器、录制器或基于 player 的自定义时间轴，就需要检查合成的 DOM 或读取其 ",[701,2255,2256],{},"__player"," \u002F ",[701,2259,2260],{},"__timelines"," 运行时对象。",[701,2263,2264],{},"iframeElement"," getter 暴露了内部 iframe 供这些消费者使用：",[706,2267,2269],{"className":963,"code":2268,"language":965,"meta":711,"style":711},"const player = document.querySelector('hyperframes-player');\nconst iframe = player.iframeElement;\n\n\u002F\u002F 访问合成的 DOM\niframe.contentDocument.querySelectorAll('[data-composition-id]');\n\n\u002F\u002F 读取运行时（GSAP 时间轴、元素注册表等）\niframe.contentWindow.__timelines;\n",[701,2270,2271,2297,2314,2318,2323,2351,2355,2360],{"__ignoreMap":711},[715,2272,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295],{"class":717,"line":718},[715,2274,1201],{"class":815},[715,2276,1205],{"class":1204},[715,2278,819],{"class":807},[715,2280,1210],{"class":1204},[715,2282,1213],{"class":807},[715,2284,1217],{"class":1216},[715,2286,1220],{"class":1204},[715,2288,981],{"class":807},[715,2290,919],{"class":725},[715,2292,981],{"class":807},[715,2294,1229],{"class":1204},[715,2296,984],{"class":807},[715,2298,2299,2301,2304,2306,2308,2310,2312],{"class":717,"line":850},[715,2300,1201],{"class":815},[715,2302,2303],{"class":1204}," iframe ",[715,2305,819],{"class":807},[715,2307,2202],{"class":1204},[715,2309,1213],{"class":807},[715,2311,2264],{"class":1204},[715,2313,984],{"class":807},[715,2315,2316],{"class":717,"line":857},[715,2317,854],{"emptyLinePlaceholder":853},[715,2319,2320],{"class":717,"line":865},[715,2321,2322],{"class":1240},"\u002F\u002F 访问合成的 DOM\n",[715,2324,2325,2328,2330,2333,2335,2338,2340,2342,2345,2347,2349],{"class":717,"line":881},[715,2326,2327],{"class":1204},"iframe",[715,2329,1213],{"class":807},[715,2331,2332],{"class":1204},"contentDocument",[715,2334,1213],{"class":807},[715,2336,2337],{"class":1216},"querySelectorAll",[715,2339,1220],{"class":1204},[715,2341,981],{"class":807},[715,2343,2344],{"class":725},"[data-composition-id]",[715,2346,981],{"class":807},[715,2348,1229],{"class":1204},[715,2350,984],{"class":807},[715,2352,2353],{"class":717,"line":887},[715,2354,854],{"emptyLinePlaceholder":853},[715,2356,2357],{"class":717,"line":893},[715,2358,2359],{"class":1240},"\u002F\u002F 读取运行时（GSAP 时间轴、元素注册表等）\n",[715,2361,2362,2364,2366,2369,2371,2373],{"class":717,"line":899},[715,2363,2327],{"class":1204},[715,2365,1213],{"class":807},[715,2367,2368],{"class":1204},"contentWindow",[715,2370,1213],{"class":807},[715,2372,2260],{"class":1204},[715,2374,984],{"class":807},[697,2376,2377,2378,2382,2383,2386],{},"这是将 player 桥接到编辑器工具（如 ",[767,2379,2380],{"href":192},[701,2381,191],{},"）的规范方式。studio 导出了一个 ",[701,2384,2385],{},"resolveIframe"," 辅助函数，它能同时处理直接 iframe 引用和 web 组件引用：",[706,2388,2392],{"className":2389,"code":2390,"language":2391,"meta":711,"style":711},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useTimelinePlayer, resolveIframe } from '@hyperframes\u002Fstudio';\n\nconst { iframeRef } = useTimelinePlayer();\nconst player = document.createElement('hyperframes-player');\nplayer.setAttribute('src', src);\ncontainer.appendChild(player);\n\n\u002F\u002F 转发内部 iframe，使 useTimelinePlayer 可以驱动 play\u002Fpause\u002Fseek。\niframeRef.current = resolveIframe(player);\n","ts",[701,2393,2394,2423,2427,2447,2473,2497,2510,2514,2519],{"__ignoreMap":711},[715,2395,2396,2398,2401,2404,2406,2409,2412,2415,2417,2419,2421],{"class":717,"line":718},[715,2397,973],{"class":972},[715,2399,2400],{"class":807}," {",[715,2402,2403],{"class":1204}," useTimelinePlayer",[715,2405,1481],{"class":807},[715,2407,2408],{"class":1204}," resolveIframe",[715,2410,2411],{"class":807}," }",[715,2413,2414],{"class":972}," from",[715,2416,976],{"class":807},[715,2418,191],{"class":725},[715,2420,981],{"class":807},[715,2422,984],{"class":807},[715,2424,2425],{"class":717,"line":850},[715,2426,854],{"emptyLinePlaceholder":853},[715,2428,2429,2431,2433,2436,2438,2441,2443,2445],{"class":717,"line":857},[715,2430,1201],{"class":815},[715,2432,2400],{"class":807},[715,2434,2435],{"class":1204}," iframeRef ",[715,2437,1538],{"class":807},[715,2439,2440],{"class":807}," =",[715,2442,2403],{"class":1216},[715,2444,1254],{"class":1204},[715,2446,984],{"class":807},[715,2448,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471],{"class":717,"line":865},[715,2450,1201],{"class":815},[715,2452,1205],{"class":1204},[715,2454,819],{"class":807},[715,2456,1210],{"class":1204},[715,2458,1213],{"class":807},[715,2460,2129],{"class":1216},[715,2462,1220],{"class":1204},[715,2464,981],{"class":807},[715,2466,919],{"class":725},[715,2468,981],{"class":807},[715,2470,1229],{"class":1204},[715,2472,984],{"class":807},[715,2474,2475,2477,2479,2482,2484,2486,2488,2490,2492,2495],{"class":717,"line":881},[715,2476,1246],{"class":1204},[715,2478,1213],{"class":807},[715,2480,2481],{"class":1216},"setAttribute",[715,2483,1220],{"class":1204},[715,2485,981],{"class":807},[715,2487,868],{"class":725},[715,2489,981],{"class":807},[715,2491,1481],{"class":807},[715,2493,2494],{"class":1204}," src)",[715,2496,984],{"class":807},[715,2498,2499,2502,2504,2506,2508],{"class":717,"line":887},[715,2500,2501],{"class":1204},"container",[715,2503,1213],{"class":807},[715,2505,2237],{"class":1216},[715,2507,2240],{"class":1204},[715,2509,984],{"class":807},[715,2511,2512],{"class":717,"line":893},[715,2513,854],{"emptyLinePlaceholder":853},[715,2515,2516],{"class":717,"line":899},[715,2517,2518],{"class":1240},"\u002F\u002F 转发内部 iframe，使 useTimelinePlayer 可以驱动 play\u002Fpause\u002Fseek。\n",[715,2520,2521,2524,2526,2529,2531,2533,2535],{"class":717,"line":914},[715,2522,2523],{"class":1204},"iframeRef",[715,2525,1213],{"class":807},[715,2527,2528],{"class":1204},"current ",[715,2530,819],{"class":807},[715,2532,2408],{"class":1216},[715,2534,2240],{"class":1204},[715,2536,984],{"class":807},[792,2538,2540],{"id":2539},"react声明式-ref-模式","React：声明式 ref 模式",[697,2542,2543],{},"如果你更喜欢 JSX 而非命令式元素创建，可以将 ref 附加到 web 组件并在 effect 中解析 iframe：",[706,2545,2549],{"className":2546,"code":2547,"language":2548,"meta":711,"style":711},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import '@hyperframes\u002Fplayer';\nimport type { HyperframesPlayer } from '@hyperframes\u002Fplayer';\nimport { useTimelinePlayer, resolveIframe } from '@hyperframes\u002Fstudio';\n\nfunction StudioPreview({ src }: { src: string }) {\nconst { iframeRef, onIframeLoad } = useTimelinePlayer();\nconst playerRef = useRef\u003CHyperframesPlayer>(null);\n\nuseEffect(() => {\niframeRef.current = resolveIframe(playerRef.current);\n});\n\nreturn (\n\u003Chyperframes-player\nref={playerRef}\nsrc={src}\nonLoad={onIframeLoad}\n\u002F>\n);\n}\n","tsx",[701,2550,2551,2563,2586,2610,2614,2642,2666,2695,2699,2712,2738,2746,2750,2756,2762,2773,2783,2796,2801,2808],{"__ignoreMap":711},[715,2552,2553,2555,2557,2559,2561],{"class":717,"line":718},[715,2554,973],{"class":972},[715,2556,976],{"class":807},[715,2558,183],{"class":725},[715,2560,981],{"class":807},[715,2562,984],{"class":807},[715,2564,2565,2567,2569,2571,2574,2576,2578,2580,2582,2584],{"class":717,"line":850},[715,2566,973],{"class":972},[715,2568,816],{"class":972},[715,2570,2400],{"class":807},[715,2572,2573],{"class":1204}," HyperframesPlayer",[715,2575,2411],{"class":807},[715,2577,2414],{"class":972},[715,2579,976],{"class":807},[715,2581,183],{"class":725},[715,2583,981],{"class":807},[715,2585,984],{"class":807},[715,2587,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608],{"class":717,"line":857},[715,2589,973],{"class":972},[715,2591,2400],{"class":807},[715,2593,2403],{"class":1204},[715,2595,1481],{"class":807},[715,2597,2408],{"class":1204},[715,2599,2411],{"class":807},[715,2601,2414],{"class":972},[715,2603,976],{"class":807},[715,2605,191],{"class":725},[715,2607,981],{"class":807},[715,2609,984],{"class":807},[715,2611,2612],{"class":717,"line":865},[715,2613,854],{"emptyLinePlaceholder":853},[715,2615,2616,2618,2621,2623,2625,2628,2630,2632,2635,2638,2640],{"class":717,"line":881},[715,2617,1919],{"class":815},[715,2619,2620],{"class":1216}," StudioPreview",[715,2622,1925],{"class":807},[715,2624,830],{"class":1487},[715,2626,2627],{"class":807}," }:",[715,2629,2400],{"class":807},[715,2631,830],{"class":811},[715,2633,2634],{"class":807},":",[715,2636,2637],{"class":721}," string",[715,2639,1930],{"class":807},[715,2641,1496],{"class":807},[715,2643,2644,2646,2648,2651,2653,2656,2658,2660,2662,2664],{"class":717,"line":887},[715,2645,1201],{"class":815},[715,2647,2400],{"class":807},[715,2649,2650],{"class":1204}," iframeRef",[715,2652,1481],{"class":807},[715,2654,2655],{"class":1204}," onIframeLoad",[715,2657,2411],{"class":807},[715,2659,2440],{"class":807},[715,2661,2403],{"class":1216},[715,2663,1254],{"class":811},[715,2665,984],{"class":807},[715,2667,2668,2670,2673,2675,2678,2680,2683,2686,2688,2691,2693],{"class":717,"line":893},[715,2669,1201],{"class":815},[715,2671,2672],{"class":1204}," playerRef",[715,2674,2440],{"class":807},[715,2676,2677],{"class":1216}," useRef",[715,2679,808],{"class":807},[715,2681,2682],{"class":721},"HyperframesPlayer",[715,2684,2685],{"class":807},">",[715,2687,1220],{"class":811},[715,2689,2690],{"class":807},"null",[715,2692,1229],{"class":811},[715,2694,984],{"class":807},[715,2696,2697],{"class":717,"line":899},[715,2698,854],{"emptyLinePlaceholder":853},[715,2700,2701,2704,2706,2708,2710],{"class":717,"line":914},[715,2702,2703],{"class":1216},"useEffect",[715,2705,1220],{"class":811},[715,2707,1254],{"class":807},[715,2709,1493],{"class":815},[715,2711,1496],{"class":807},[715,2713,2714,2716,2718,2721,2723,2725,2727,2730,2732,2734,2736],{"class":717,"line":1318},[715,2715,2523],{"class":1204},[715,2717,1213],{"class":807},[715,2719,2720],{"class":1204},"current",[715,2722,2440],{"class":807},[715,2724,2408],{"class":1216},[715,2726,1220],{"class":811},[715,2728,2729],{"class":1204},"playerRef",[715,2731,1213],{"class":807},[715,2733,2720],{"class":1204},[715,2735,1229],{"class":811},[715,2737,984],{"class":807},[715,2739,2740,2742,2744],{"class":717,"line":1338},[715,2741,1538],{"class":807},[715,2743,1229],{"class":811},[715,2745,984],{"class":807},[715,2747,2748],{"class":717,"line":1353},[715,2749,854],{"emptyLinePlaceholder":853},[715,2751,2752,2754],{"class":717,"line":1368},[715,2753,1937],{"class":972},[715,2755,1940],{"class":811},[715,2757,2758,2760],{"class":717,"line":1383},[715,2759,808],{"class":807},[715,2761,862],{"class":721},[715,2763,2764,2767,2769,2771],{"class":717,"line":1398},[715,2765,2766],{"class":815},"ref",[715,2768,1953],{"class":807},[715,2770,2729],{"class":1204},[715,2772,1958],{"class":807},[715,2774,2775,2777,2779,2781],{"class":717,"line":1412},[715,2776,868],{"class":815},[715,2778,1953],{"class":807},[715,2780,868],{"class":1204},[715,2782,1958],{"class":807},[715,2784,2786,2789,2791,2794],{"class":717,"line":2785},17,[715,2787,2788],{"class":815},"onLoad",[715,2790,1953],{"class":807},[715,2792,2793],{"class":1204},"onIframeLoad",[715,2795,1958],{"class":807},[715,2797,2799],{"class":717,"line":2798},18,[715,2800,1976],{"class":807},[715,2802,2804,2806],{"class":717,"line":2803},19,[715,2805,1229],{"class":811},[715,2807,984],{"class":807},[715,2809,2811],{"class":717,"line":2810},20,[715,2812,1958],{"class":807},[2814,2815,2816,2822],"blockquote",{},[697,2817,2818,2819],{},"⚠️ ",[737,2820,2821],{},"Warning",[697,2823,2824,2827,2828,2830,2831,2833,2834,2836,2837,2257,2840,2843,2844,2846,2847,2852,2853,2855,2856,2858],{},[737,2825,2826],{},"常见问题"," — 如果你将 ",[701,2829,703],{}," 元素本身（而非 ",[701,2832,2264],{},"）传入期望 ",[701,2835,2252],{}," 的 hook 或 API，所有 ",[701,2838,2839],{},".contentWindow",[701,2841,2842],{},".contentDocument"," 访问都会返回 ",[701,2845,2690],{},"，因为 iframe 位于 player 的 Shadow DOM 内部。时间轴跳转、播放、暂停和 DOM 检查都会静默地不执行任何操作。",[737,2848,2849,2850],{},"始终先提取 ",[701,2851,2264],{},"，或使用 ",[701,2854,191],{}," 的 ",[701,2857,2385],{},"，它能透明地处理 iframe 和 web 组件宿主。",[731,2860,2861],{"id":2861},"架构",[697,2863,2864],{},"player 在 Shadow DOM 容器内使用 iframe。这提供了：",[744,2866,2867,2873,2879],{},[747,2868,2869,2872],{},[737,2870,2871],{},"隔离"," — 合成的 CSS\u002FJS 不会泄漏到或冲突于你的页面",[747,2874,2875,2878],{},[737,2876,2877],{},"安全"," — iframe 沙箱限制了合成的能力",[747,2880,2881,2884],{},[737,2882,2883],{},"缩放"," — 通过 CSS 变换自动缩放合成以适应 player 的容器",[697,2886,2887,2888,2891],{},"player 通过 HyperFrames 运行时桥接协议（",[701,2889,2890],{},"postMessage","）与合成通信。现有的合成无需修改即可工作。",[731,2893,2894],{"id":2894},"控件",[697,2896,2897,2898,2900],{},"当存在 ",[701,2899,1098],{}," 属性时，底部会出现一个最小化的覆盖层：",[744,2902,2903,2909,2915,2921],{},[747,2904,2905,2908],{},[737,2906,2907],{},"播放\u002F暂停"," 按钮（左侧）",[747,2910,2911,2914],{},[737,2912,2913],{},"进度条"," 支持拖动（鼠标 + 触控）",[747,2916,2917,2920],{},[737,2918,2919],{},"时间显示"," 显示当前时间 \u002F 总时长（右侧）",[747,2922,2923],{},"3 秒不活动后自动隐藏，悬停时重新出现",[902,2925,2926],{},"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 .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 .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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":711,"searchDepth":718,"depth":850,"links":2928},[2929,2930,2934,2935,2936,2937,2942,2945,2946],{"id":733,"depth":850,"text":733},{"id":15,"depth":850,"text":15,"children":2931},[2932,2933],{"id":794,"depth":857,"text":795},{"id":959,"depth":857,"text":960},{"id":1018,"depth":850,"text":1019},{"id":1183,"depth":850,"text":1184},{"id":1426,"depth":850,"text":1426},{"id":1887,"depth":850,"text":1887,"children":2938},[2939,2940,2941],{"id":1890,"depth":857,"text":1891},{"id":1989,"depth":857,"text":1990},{"id":2093,"depth":857,"text":2093},{"id":2245,"depth":850,"text":2246,"children":2943},[2944],{"id":2539,"depth":857,"text":2540},{"id":2861,"depth":850,"text":2861},{"id":2894,"depth":850,"text":2894},"可嵌入的 Web 组件，用于在任何网页中播放 HyperFrames 合成。","md",null,{},{"title":183,"description":2947},"uCBzY7NL-xePAJyn1cZg0_h96_Qv-i_iAA4qHxSHo5Q",[2954,2956],{"title":179,"path":180,"stem":181,"description":2955,"children":-1},"基于 Chrome BeginFrame API 的可寻址页面到视频捕获引擎。",{"title":187,"path":188,"stem":189,"description":2957,"children":-1},"完整的 HTML 到视频渲染管道，支持编码、音频混音和 Docker。",1780322251878]