What It Is
ASCIIplayer-embed.html is the
slimmed-down player of the ASCII Video Workshop (full edition):
a single file, zero build (only typegpu pulled in from a CDN), and no parameter panel — it does one thing only:
read a .ascii-video file and play it. Frame data is re-computed into character art on the fly by a WebGPU shader using the current
parameters, so glyph size, gamma, inversion, and other parameters can be changed any time after load and take effect instantly.
All picture parameters are supplied externally via the URL query string or postMessage,
making it ideal for embedding into any web page with an <iframe>.
Live Demo
The iframe below embeds the Embed player (sample data /ToolBase/ASCII/video/demo.ascii-video).
Every change in the right-hand panel is pushed live via postMessage — no refresh needed; the three code blocks stay strictly in sync with the current preview parameters.
<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 video player">
</iframe>const player = document.querySelector('iframe');
// Change parameters live: exactly matches the current preview parameters (no refresh needed)
player.contentWindow.postMessage({
type: 'ascii:params',
params: {},
}, '*');
// Playback control
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-videoThis URL matches the preview parameters on the right exactly: it updates automatically after you adjust any of them.
Playback Control (postMessage)
Render Parameters (live via postMessage)
Aspect Ratio & Playback
URL Examples (effective at load)
Each example is a standalone player instance; click one to open it in a new tab.
Player Diagnostics
Loading…
If playback fails, copy the diagnostics and send them along for feedback to pinpoint the problem quickly.
Embedding
The three control methods can be mixed: URL parameters take effect at load → postMessage can override at any time → last writer wins.
ui=none hides all controls (pure canvas, click to toggle play/pause); the default ui=full shows the playback control bar.
For the full parameter table and API details, see the "ASCII Video Workshop Guide" (/guide-ascii/).
URL Parameter Examples
Each example is a standalone player instance: click one to open it in a new tab, where the URL parameters take effect at load.
Player Diagnostics
The player exposes window.AsciiEmbed.getState(): it returns the frame count, dimensions, fps, playback state,
render backend (webgpu/cpu), error counts, and more — useful for automated verification and problem diagnosis.
When playback fails, "Copy diagnostics" in the right-hand panel collects environment info in one click.
Three-Step Quick Start
- Prepare the file: first use the full ASCII Workshop to upload a video → tweak the parameters → save it as
.ascii-video(v6/v7), or simply use this site's sample file/ToolBase/ASCII/video/demo.ascii-video. - Assemble the URL: put the file path into
?src=and append the picture parameters you need, e.g.?src=/demo.ascii-video&mode=grayscale&glyph=24. - Embed the page: paste the "① Full iframe embed" code block above into your HTML; if you need dynamic tuning, also add the "② postMessage external control" script.
allow="autoplay", otherwise the browser may block it.