@framv/video

@framv/video

<framv-video> — declarative HTML element that renders any HTML/CSS/SVG content to MP4 or WebM video. CSS @keyframes and SVG SMIL <animate> are captured frame-by-frame.

Install

npm install @framv/video

CDN

<script src="https://cdn.jsdelivr.net/npm/@framv/core/dist/bundle.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@framv/video/dist/bundle.iife.js"></script>

<framv-video width="800" height="600" fps="30" duration="4" controls>
  <div style="animation: fadeIn 0.6s ease both">Hello framv</div>
</framv-video>

Attributes

Attribute	Default	Description
width	1920	Canvas width
height	1080	Canvas height
fps	30	Frames per second
duration	5	Duration in seconds
format	mp4	Export format: mp4 or webm
quality	0.95	Export quality 0–1
controls	—	Always show transport bar
autoplay	—	Start playing on load
loop	—	Loop playback

Programmatic

import "@framv/video"; // registers <framv-video>
import { Player } from "@framv/video";

const player = new Player(document.querySelector("#content"));
player.setDuration(10);
player.play();