# Live video preset

The live video preset — a player, feature bundle, skins, and media for live video streams

`@videojs/html/live-video` is the preset for live video streams. It bundles the `<live-video-player>` element, the `liveVideoFeatures` bundle it is configured with, and two skins that swap the time slider and time displays for a Live button, and plays through the browser’s native `<video>`. See [Presets](https://videojs.org/docs/framework/html/guides/presets) for how presets fit together and [Live streams](https://videojs.org/docs/framework/html/guides/live-streams) for playing a live source.

## Import

```ts
import '@videojs/html/live-video/player';
import '@videojs/html/live-video/skin';
```

Import `@videojs/html/live-video/neutral-skin` instead for the neutral skin. Or load one [CDN](https://videojs.org/docs/framework/html/guides/cdn) bundle that registers the player and a skin together:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/live-video.js"></script>
```

`live-video-neutral.js` registers the neutral skin instead, and `live-video-player.js` registers `<live-video-player>` alone.

## Usage

Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native video.

**index.html**

```html
<script type="module">
  import '@videojs/html/live-video/player';
  import '@videojs/html/live-video/skin';
  import '@videojs/html/media/hlsjs-video';
</script>

<live-video-player>
  <live-video-skin>
    <hlsjs-video src="https://example.com/live.m3u8"></hlsjs-video>
  </live-video-skin>
</live-video-player>
```

## Player

`@videojs/html/live-video/player` registers `<live-video-player>`, whose class is `LiveVideoPlayerElement`. It is a [player](https://videojs.org/docs/framework/html/reference/components/player) element created by [`createPlayer`](https://videojs.org/docs/framework/html/reference/api/html-create-player) with `liveVideoFeatures`. It owns the player store but no layout. Put a skin or a [`<media-container>`](https://videojs.org/docs/framework/html/reference/components/player-container) inside it.

| Attribute | Property | Description |
| --- | --- | --- |
| `content-title` | `contentTitle` | The title to display. Takes precedence over the title the media reports. |
| `poster` | `poster` | The poster to display. Takes precedence over the poster the media reports. |
| `keep-alive` | — | Keeps the player and its store alive when the element leaves the DOM. Call `destroy()` when you’re done with it. |

`content-title` and `poster` come from the [metadata feature](https://videojs.org/docs/framework/html/reference/api/feature-metadata#player-inputs). The element’s read-only `store` property returns its player store.

The preset root also exports a `PlayerController` bound to the live video player’s store. Use it from any custom element inside `<live-video-player>`; see [`PlayerController`](https://videojs.org/docs/framework/html/reference/api/player-controller).

## Feature bundle

`liveVideoFeatures` is the array of [features](https://videojs.org/docs/framework/html/guides/features) the player is configured with. It is the [video preset’s](https://videojs.org/docs/framework/html/reference/api/preset-video#feature-bundle) `videoFeatures` without playback rate, quality, and audio-track selection, plus the [live feature](https://videojs.org/docs/framework/html/reference/api/feature-live):

| Feature | Description |
| --- | --- |
| [`playbackFeature`](https://videojs.org/docs/framework/html/reference/api/feature-playback) | Play/pause state and actions for the player store |
| [`volumeFeature`](https://videojs.org/docs/framework/html/reference/api/feature-volume) | Volume level and mute state for the player store |
| [`timeFeature`](https://videojs.org/docs/framework/html/reference/api/feature-time) | Playback position and duration state for the player store |
| [`sourceFeature`](https://videojs.org/docs/framework/html/reference/api/feature-source) | Media source state and actions for the player store |
| [`bufferFeature`](https://videojs.org/docs/framework/html/reference/api/feature-buffer) | Buffered and seekable time range state for the player store |
| [`fullscreenFeature`](https://videojs.org/docs/framework/html/reference/api/feature-fullscreen) | Fullscreen state and actions for the player store |
| [`pipFeature`](https://videojs.org/docs/framework/html/reference/api/feature-pip) | Picture-in-picture state and actions for the player store |
| [`remotePlaybackFeature`](https://videojs.org/docs/framework/html/reference/api/feature-remote-playback) | Remote playback state and actions for the player store |
| [`controlsFeature`](https://videojs.org/docs/framework/html/reference/api/feature-controls) | User activity and controls visibility state for the player store |
| [`textTrackFeature`](https://videojs.org/docs/framework/html/reference/api/feature-text-tracks) | Subtitles, captions, and chapter track state for the player store |
| [`errorFeature`](https://videojs.org/docs/framework/html/reference/api/feature-error) | Media error state and actions for the player store |
| [`liveFeature`](https://videojs.org/docs/framework/html/reference/api/feature-live) | Live edge state for the player store |
| [`metadataFeature`](https://videojs.org/docs/framework/html/reference/api/feature-metadata) | Resolved title and poster values for the player store |

Its type, `LiveVideoFeatures`, is the tuple of those features in order. Import it from the package root:

```ts
import type { LiveVideoFeatures } from '@videojs/html';
```

To add or remove a feature, pass your own array to `createPlayer`. The skins expect the features they render controls for.

```ts
import { createPlayer, streamTypeFeature } from '@videojs/html';
import { liveVideoFeatures } from '@videojs/html/live-video';

const { PlayerElement } = createPlayer({
  features: [...liveVideoFeatures, streamTypeFeature],
});

customElements.define('my-live-video-player', PlayerElement);
```

## Skins

- [LiveVideoSkin](https://videojs.org/docs/framework/html/reference/components/live-video-skin) — the default skin, which swaps the time controls for a Live button.
- [NeutralLiveVideoSkin](https://videojs.org/docs/framework/html/reference/components/live-video-neutral-skin) — the visually lighter variant, closer to a classic control bar.

## Media

The preset plays through a native [`<video>`](https://videojs.org/docs/framework/html/reference/components/video), so it registers no media component of its own. Most browsers need a streaming [media component](https://videojs.org/docs/framework/html/guides/media-sources) to play a live source, such as [`<hlsjs-video>`](https://videojs.org/docs/framework/html/reference/components/hlsjs-video) for HLS.

## Exports

The preset root, `@videojs/html/live-video`, has no side effects. Importing it never registers an element:

| Export | Description |
| --- | --- |
| `LiveVideoPlayerElement` | The [player](#player) element class. |
| `PlayerController` | The player controller, bound to the live video player’s store. |
| `liveVideoFeatures` | The [feature bundle](#feature-bundle). |
| `LiveVideoSkinElement` | The default [skin](#skins) element class. |
| `NeutralLiveVideoSkinElement` | The neutral [skin](#skins) element class. |

Registration entry points are side-effect-only:

| Entry point | Registers |
| --- | --- |
| `@videojs/html/live-video/player` | `<live-video-player>` |
| `@videojs/html/live-video/skin` | `<live-video-skin>`, `<media-container>`, and the UI elements the skin composes |
| `@videojs/html/live-video/neutral-skin` | `<live-video-neutral-skin>`, `<media-container>`, and the UI elements the neutral skin composes |
| `@videojs/html/live-video/ui` | `<media-container>` and the UI elements of the default skin, without the skin, for a layout you write yourself |
| `@videojs/html/live-video/neutral-ui` | `<media-container>` and the UI elements of the neutral skin, without the skin |

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt