<!doctype html>
<html lang="en">
<meta charset="utf-8" />
<title>zvidlib WebGL canvas example</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
#canvas-wrap { position: relative; width: 100%; }
canvas { display: block; width: 100%; height: auto; background: #000; border: 1px solid #444; }
#fps, #seek-latency {
position: absolute; left: 0.5rem; margin: 0;
color: #0f0; font: 12px/1.4 ui-monospace, monospace;
background: rgba(0, 0, 0, 0.5); padding: 0.15rem 0.4rem; border-radius: 0.25rem;
}
#fps { top: 0.5rem; }
#seek-latency { top: 2.2rem; }
#status { white-space: pre-wrap; max-width: 40rem; }
#controls { display: grid; grid-template-columns: repeat(5, max-content) 1fr; gap: 0.5rem; align-items: center; margin: 1rem 0; }
#timeline { width: 100%; }
</style>
<h1>zvidlib WebGL canvas example</h1>
<p>
Opens the Big Buck Bunny sample, decodes it with zvidlib's browser WebCodecs backend, and
renders the real frames onto a WebGL2 canvas. The clip is bundled twice, with an HEVC track
and with an AV1 one, and this page asks the browser which it can decode before fetching
either; only a browser with neither falls back to a synthetic gradient. The status below
reports which sample was chosen — see <a href="../README.md">examples/README.md</a> for
details.
</p>
<div id="canvas-wrap">
<canvas id="video" width="1280" height="720"></canvas>
<p id="fps">-- fps</p>
<p id="seek-latency">seek -- ms</p>
</div>
<div id="controls">
<button id="rewind" type="button">-5s</button>
<button id="previous-frame" type="button">Prev</button>
<button id="play" type="button">Play</button>
<button id="next-frame" type="button">Next</button>
<button id="fast-forward" type="button">+5s</button>
<input id="timeline" type="range" min="0" max="0" value="0" step="1" aria-label="Timeline" />
</div>
<pre id="status">Loading…</pre>
<script type="module" src="./main.js"></script>
</html>