# HlsBackgroundVideo

HLS background video without controls, audio, captions, or adaptive quality

HlsBackgroundVideo plays an HLS source through the SPF background engine. It is fixed to muted, autoplaying, inline, looped playback and omits controls, audio, text, DRM, and adaptive rendition switching.

See [Add a background video](https://videojs.org/docs/framework/react/guides/background-video) for layout, poster, accessibility, and source-choice guidance.

## Import

```tsx
import { HlsBackgroundVideo } from '@videojs/react/media/hls-background-video';
```

## Source behavior

`src` takes a complete HLS manifest URL. The engine starts loading when it receives the URL and pins the largest rendition that fits the screen. The ladder may be video-only, but its video renditions must use fMP4/CMAF. This engine does not include MPEG-TS transmuxing or DRM playback.

```tsx
<HlsBackgroundVideo
  src="https://media.example.com/hero.m3u8"
  crossOrigin="anonymous"
  onError={handleError}
/>
```

There is no `source` object, `preload` mode, or opt-out for muted, autoplay, and loop. Assigning a new `src` restarts playback from scratch.

## API

| Member | Description |
| --- | --- |
| `src` | HLS manifest URL |
| `onError` | Fires on the rendered `<video>` when SPF reports a fatal source error |
| `ref` | Ref to the rendered native `<video>` element |

`onError` receives an `error` event dispatched on the rendered `<video>`. The video’s own `error` can remain `null` because SPF, rather than the browser, rejected the source.

## Styling

The component renders a native `<video>`. Set its size, `object-fit`, and `object-position` through `className` or `style`.

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt