# Embed playback

Play a live broadcast on your own page with the MoQ web player, a hosted link, HLS, or WHEP.

The dashboard's **Broadcasts** page shows these snippets for a live broadcast under **Embed instructions**, with its project and name filled in.

## Before you start

Viewers need a subscribe token for the broadcast, unless [public access](/tokens#public-access) lets anyone subscribe to it. [Tokens](/tokens) shows how to mint one per viewer or per page load from your server. Anyone holding a page with the token baked in can watch until it expires.

In the snippets below, replace `<project>` with the project id, `<broadcast>` with the broadcast name, and `<jwt>` with the subscribe token. Drop `?jwt=<jwt>` for a public broadcast.

| Option | Latency | Works where |
| --- | --- | --- |
| [Web player](#web-player) | Lowest | Browsers with WebTransport or WebSocket |
| [Hosted player](#hosted-player) | Lowest | Anywhere a link or iframe goes |
| [HLS](#hls) | Seconds | Every device, including Safari, VLC, and smart TVs |
| [WHEP](#whep) | Low | WebRTC players |

## Web player

The `<moq-watch>` element connects to the CDN and renders the broadcast. Load it from a CDN:

```html
<script type="module">
  import "https://esm.sh/@moq/watch/element";
  import "https://esm.sh/@moq/watch/ui";
</script>

<moq-watch-ui>
  <moq-watch url="https://cdn.moq.pro/<project>?jwt=<jwt>" name="<broadcast>.hang">
    <canvas></canvas>
  </moq-watch>
</moq-watch-ui>
```

Or install it with your bundler:

```sh
npm install @moq/watch
```

```js
import "@moq/watch/element";
import "@moq/watch/ui";
```

`<moq-watch-ui>` adds the controls; drop it to style your own. Upstream's [`@moq/watch` page](https://doc.moq.dev/lib/js/watch) lists the element's attributes, events, and browser support.

## Hosted player

moq.watch hosts the same player, so a link or iframe needs no code:

```text
https://moq.watch/<project>/<broadcast>.hang?jwt=<jwt>
```

```html
<iframe
  src="https://moq.watch/<project>/<broadcast>.hang?jwt=<jwt>"
  allow="autoplay; fullscreen"
  style="border: 0; width: 100%; aspect-ratio: 16 / 9;"
></iframe>
```

## HLS

```text
https://cdn.moq.pro/hls/<project>/<broadcast>.hang/master.m3u8?jwt=<jwt>
```

Paste it into Safari, hls.js, VLC, or ffplay. The CDN builds the playlist from the live broadcast on demand, so there is nothing to enable. The token stays in the URL and carries onto every child playlist and segment, so a plain `<video src>` keeps working. HLS players decode H.264 or H.265 with AAC; other codecs may show a black player. Playback trails the live edge by a few segments.

## WHEP

```text
https://cdn.moq.pro/whep/<project>/<broadcast>.hang?jwt=<jwt>
```

Paste it into any [WHEP](https://datatracker.ietf.org/doc/draft-ietf-wish-whep/) player. WebRTC carries no AAC, so the broadcast needs Opus audio for viewers to hear it.

## Native apps

The MoQ libraries for Rust, C, Swift, Kotlin, Python, and Go subscribe with the same URL and name as the web player. See [doc.moq.dev](https://doc.moq.dev/lib/) for each.