ASCII Player Embed Demo
An interactive live demo of the three ways to control the ASCII player Embed edition from outside — URL parameters (effective at load), postMessage (real-time tuning inside an iframe), and the global API (called from same-page scripts).
Contents
Jump straight to a section.
WebGPU (Chrome 113+ / Edge 113+) is required for GPU rendering; without it the player automatically falls back to CPU compute. The panel on the right tunes parameters in real time, and the code blocks stay strictly in sync with the current parameters.
What It Is
A single-file, zero-build Embed edition with no parameter panel: all it does is read and play .ascii-video.
ASCIIplayer-embed.html is
the ASCII Video Workshop (full edition)'s slimmed-down player:
a single file, zero build (only typegpu pulled in from a CDN), 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 on the left embeds the Embed player; every change in the right-hand parameter panel is pushed live via postMessage — no refresh needed, and the three code blocks stay strictly in sync with the preview parameters.
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 controlplayer.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
This 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.
Embedding
The three control methods can be mixed: URL parameters take effect at load, postMessage overrides at any time, and the last writer wins; ui=none hides every control, while ui=full shows the playback control bar.
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
Six parameter combinations, each backed by its own standalone player instance — click one to compare.
Each example is a standalone player instance: click one to open it in a new tab, where the URL parameters take effect at load.
/ToolBase/ASCII/ASCIIplayer-embed.html?src=/ToolBase/ASCII/video/demo.ascii-video
Player Diagnostics
The player exposes everything about itself on window.AsciiEmbed.getState() — when playback fails, read the diagnostics first to decide whether it is an environment problem or a file problem.
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.
Diagnostics panel
Loading…
If playback fails, copy the diagnostics and send them along to pinpoint the problem quickly.
Three-Step Quick Start
Prepare the file → assemble the URL → embed the page: three steps turn a .ascii-video into an interactive web player.
- 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.