ASCII 播放器 Embed 演示
以可交互的实时演示，展示 ASCII 播放器 Embed 版的三种外部控制方式——URL 参数（加载即生效）、postMessage（iframe 实时调参）与全局 API（同页脚本调用）。
目录
按章节顺序排列，点击直接跳转。
需要 WebGPU（Chrome 113+ / Edge 113+）体验 GPU 渲染；不支持时播放器会自动切换 CPU 计算。下方右侧面板可实时调参，代码块与当前参数严格同步。
它是什么
单文件、零构建、无参数面板的 Embed 版：只负责读取并播放 .ascii-video。
ASCIIplayer-embed.html 是
ASCII 视频工坊（完整版）的精简版播放器：
单文件、零构建（仅 CDN 引入 typegpu）、无参数面板——只做一件事，
读取 .ascii-video 文件并播放。帧数据由 WebGPU 着色器按当前参数
实时重算为字符画，因此字形大小、伽马、反色等参数可在加载后随时修改、即时生效。
所有画面参数通过 URL 查询字符串 或 postMessage 外部指定，
适合以 <iframe> 方式嵌入任意网页。
实时演示
左侧 iframe 内嵌 Embed 播放器，右侧参数面板的每一次改动都通过 postMessage 实时推送 —— 无需刷新，三段代码块与预览参数严格同步。
下方 iframe 内嵌 Embed 播放器（示例数据 /ToolBase/ASCII/video/demo.ascii-video）。
右侧面板的所有改动通过 postMessage 实时推送，无需刷新；三个代码块与当前预览参数严格同步。
<iframe src="/ToolBase/ASCII/ASCIIplayer-embed.html?src=/ToolBase/ASCII/video/demo.ascii-video" width="960" height="540" allow="autoplay" style="border:0;border-radius:8px;background:#060b14" title="ASCII 视频播放器"></iframe>
const player = document.querySelector('iframe'); // 实时改参: 与当前预览参数严格一致 (无需刷新)player.contentWindow.postMessage({ type: 'ascii:params', params: {},}, '*'); // 播放控制player.contentWindow.postMessage({ type: 'ascii:play' }, '*');player.contentWindow.postMessage({ type: 'ascii:pause' }, '*');player.contentWindow.postMessage({ type: 'ascii:seek', ratio: 0.5 }, '*');
/ToolBase/ASCII/ASCIIplayer-embed.html?src=/ToolBase/ASCII/video/demo.ascii-video
此 URL 与右侧预览参数严格一致：调整右侧任意参数后自动更新。
播放控制 (postMessage)
渲染参数 (postMessage 实时)
画面比例与播放
URL 示例（加载即生效）
每个示例都是独立的播放器实例，点击后在新标签页打开体验。
嵌入方式
三种控制方式可以混用：URL 参数在加载时生效，postMessage 随时覆盖，后到者胜；ui=none 隐藏全部控件，ui=full 显示播放控制条。
三种控制方式可混用：URL 参数加载时生效 → postMessage 随时覆盖 → 后到者胜。
ui=none 隐藏全部控件（纯画布，点击切换播放/暂停）；默认 ui=full 显示播放控制条。
完整参数表与 API 细节见「ASCII 视频工坊使用指南」（/guide-ascii/）。
URL 参数示例
六组参数组合各自对应一个独立的播放器实例，点击即可打开对照效果。
每个示例都是独立的播放器实例：点击后在新标签页打开，URL 参数加载时即生效。
/ToolBase/ASCII/ASCIIplayer-embed.html?src=/ToolBase/ASCII/video/demo.ascii-video
播放器诊断
播放器把自己的一切都暴露在 window.AsciiEmbed.getState() 上 —— 无法播放时先读诊断，再决定是环境问题还是文件问题。
播放器暴露 window.AsciiEmbed.getState()：返回帧数、尺寸、fps、播放状态、
渲染后端（webgpu/cpu）、错误计数等，可用于自动化验证与问题定位。
无法播放时，右侧面板「复制诊断」可一键收集环境信息。
诊断面板
加载中…
无法播放时复制诊断信息反馈，可快速定位问题。
三步上手
准备文件 → 拼接 URL → 嵌入页面：三步就能把一个 .ascii-video 变成可交互的网页播放器。
- 准备文件：先用完整版 ASCII 工坊 上传视频 → 调整参数 → 保存为
.ascii-video（v6/v7），或直接使用本站示例文件/ToolBase/ASCII/video/demo.ascii-video。 - 拼接 URL：把文件地址放进
?src=，追加需要的画面参数，例如?src=/demo.ascii-video&mode=grayscale&glyph=24。 - 嵌入页面：把上方「① 完整 iframe 引用」代码块粘贴进你的 HTML；如需动态调参，再加「② postMessage 外部控制」脚本。
allow="autoplay"，否则浏览器可能拦截。