---
url: /examples/textures/video.md
description: >-
Use an HTML video as a live texture and sample its frames directly in a
fragment shader.
---
::: example-editor
```ts
import { glCanvas, loadVideoTexture } from "@radiancejs/gl";
import "./styles.css";
glCanvas({
canvas: "#glCanvas",
fragment: /* glsl */ `
varying vec2 vUv;
uniform sampler2D uTexture;
void main() {
vec3 color = texture(uTexture, vUv).rgb;
// try playing with the colors here
//color = color.bgr;
gl_FragColor = vec4(color, 1.);
}
`,
uniforms: {
uTexture: loadVideoTexture(
"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
),
},
});
```
```css
body {
margin: 0;
height: 100svh;
display: grid;
place-items: center;
background: black;
}
canvas {
width: 100svw;
display: block;
}
```
```html
RadianceJS Example
```
:::