···66import { PropDocs } from "../../../lib/PropDocs";
77import { Example } from "../../../lib/Example";
88import { Basic } from "../../../examples/video/basic";
99+import { CustomControls } from "../../../examples/video/custom-controls";
910import { Tracks } from "../../../examples/video/tracks";
10111112<Example src={Basic} />
···20212122## Features
22232323-### Default controls
2424+### Media Types
24252525-The component ships with play, seek, timeline, volume, and fullscreen controls.
2626+The default player renders a native `video` element.
2727+Pass `mediaType` when you want to target another Media Chrome media element directly.
2828+When `src` contains a recognizable provider URL, the component also auto-detects common media types.
2929+This currently covers HLS, DASH, Cloudflare Stream, JW Player, Mux, Vimeo, Wistia, and YouTube.
3030+For wrappers like Shaka and Video.js, pass `mediaType` explicitly.
26312727-### Layout stability
3232+Supported media tags:
28332929-The player reserves space with an aspect ratio by default.
3030-This helps avoid layout shift while the media metadata loads.
3434+- [Cloudflare](https://www.media-chrome.org/docs/en/media-elements/cloudflare-video)
3535+- [DASH](https://www.media-chrome.org/docs/en/media-elements/dash-video)
3636+- [HLS](https://www.media-chrome.org/docs/en/media-elements/hls-video)
3737+- [JWPlayer](https://www.media-chrome.org/docs/en/media-elements/jwplayer-video)
3838+- [Mux](https://www.media-chrome.org/docs/en/media-elements/mux-video)
3939+- [Shaka](https://www.media-chrome.org/docs/en/media-elements/shaka-video)
4040+- [Video.js](https://www.media-chrome.org/docs/en/media-elements/video-js-video)
4141+- [Vimeo](https://www.media-chrome.org/docs/en/media-elements/vimeo-video)
4242+- [Wistia](https://www.media-chrome.org/docs/en/media-elements/wistia-video)
4343+- [YouTube](https://www.media-chrome.org/docs/en/media-elements/youtube-video)
31443232-### Custom controls
4545+#### Setup
33463434-Pass custom Media Chrome children when you need a different control layout.
3535-If you do not pass children, the default control bar is rendered automatically.
4747+Install and register the media element package that matches the provider you want to use.
4848+For example, HLS playback uses `hls-video-element`.
4949+5050+```bash
5151+pnpm i hls-video-element
5252+```
5353+5454+Import the package in the app where you render `Video`.
5555+Then either let the component infer the media element from `src`, or set `mediaType` explicitly.
5656+5757+```tsx
5858+import "hls-video-element";
5959+6060+function Example() {
6161+ return (
6262+ <Video
6363+ mediaType="hls-video"
6464+ src="https://example.com/video.m3u8"
6565+ />
6666+ );
6767+}
6868+```
6969+7070+The same pattern applies to the other Media Chrome media elements listed above.
36713772### Tracks
3873···4075Pass `audioTracks` to show the audio track menu and expose alternate selections in the default controls.
41764277<Example src={Tracks} />
7878+7979+### Custom controls
8080+8181+Pass custom Media Chrome children when you need a different control layout.
8282+If you do not pass children, the default control bar is rendered automatically.
8383+8484+<Example src={CustomControls} />
43854486## Props
4587