comark-media

Videos and audio written as images, as GitLab does. Both get controls on the shadcn/ui tokens, with the browser's own as their fallback. A GitHub attachment link alone in a paragraph plays too, as on GitHub. A Comark plugin for HTML, Vue, React, and Svelte.

pnpm add comark comark-media

import { createHtmlRenderer } from "@comark/html";
import media, { components } from "comark-media/html";

const render = createHtmlRenderer({ plugins: [media()], components });

![Signing in with a passkey](./login.mp4)

![The spinner while the build runs](./spinner.webm){autoplay loop muted poster="./spinner.png"}

![The new alert sound](./alert.mp3)

https://github.com/user-attachments/assets/2f3c0e3e-1c4b-4c3a-9a6b-0b1e2f3a4b5c

An image ending in .mp4, .webm, .mov, or .m4v becomes <video controls playsinline preload="metadata">, and one ending in .mp3, .wav, .ogg, or .m4a becomes <audio controls preload="metadata">. The alt text labels the player. autoplay, loop, muted, poster, width, and height pass through. Give a video paired pixel dimensions like {width=1280 height=720} to reserve its room. media({ size: true }) measures remote videos without dimensions while parsing. Enable it only for trusted documents: requests follow redirects and can reach private networks. By default measurement reads only data URIs; media({ size: false }) disables it.

Players come with a play button, the time, a seek bar, and a mute button with a volume slider over it, and a settings panel for the speed and looping, drawn with the shared --comark-* tokens; a video's float over its bottom edge and add a full screen button, and on a touch screen spread over the video with the sound and settings in its top corner. A small script runs them. Until it does, and when a file can't play, the browser's own controls show instead, so the file plays without any script. Pass media({ controls: "native" }) to keep the browser's controls and leave the script out.

comark-zoom never zooms a video and comark-chips never turns an attachment link into a chip, in any plugin order.

The plugin adds every problem to meta.issues, so a host can reject a document before publishing it, such as a file without alt text or autoplay without muted.

Renderers

| Renderer | Import | | --- | --- | | @comark/html | comark-media/html: the styles are inlined | | @comark/vue | comark-media/vue | | @comark/react | comark-media/react | | @comark/svelte | comark-media/svelte |

Each entry exports the parse plugin as default and the renderer's components. The Vue, React, and Svelte components add the styles and start the players when they mount; import comark-media/style.css with your styles so a server-rendered page doesn't shift. The styles read the shared --comark-* tokens and sit in a comark CSS layer, so any plain rule of your own wins.