Add a video player to your web app with Video.js, and set it up for signed playback, DRM, Mux Data, casting, live streams and a custom UI.
To play Mux video and audio in a web app, use Video.js, an open source web player. Video.js has Mux packages, maintained by Mux:
@videojs/mux-video and @videojs/mux-audio play Mux streams.@videojs/mux-data monitors playback with Mux Data.The Video.js documentation is the source of truth for these packages. This page gets a player running and points you to the right place for each Mux feature you want to set up.
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10/video.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10/media/mux-video.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10/extensions/mux-data.js"></script>
<video-player>
<video-skin style="display: block; width: 100%; aspect-ratio: 16 / 9;">
<mux-video
src="https://stream.mux.com/{PLAYBACK_ID}.m3u8"
playsinline
crossorigin="anonymous"
></mux-video>
<mux-data></mux-data>
</video-skin>
</video-player>
<script type="module">
document.querySelector('mux-data').metadata = {
video_title: 'Test video title',
viewer_user_id: 'user-id-007',
};
</script>Replace {PLAYBACK_ID} with a playback ID from one of your Mux assets or live streams.
The HTML example loads Video.js from a CDN. See Installation to install it with npm instead, or CDN for every bundle the CDN serves.
Each task links to the Video.js docs for HTML and React. Where Mux needs setup first, like creating tokens or a custom domain, the last column links to the Mux guide.
| To do this | HTML | React | Set up in Mux |
|---|---|---|---|
| Play a Mux video or audio stream | Mux Video, Mux Audio | Mux Video, Mux Audio | |
| Set playback options, posters and storyboards | Media sources | Media sources | |
| Play signed content | Media sources | Media sources | Secure video playback |
| Play DRM-protected content | Media sources | Media sources | Protect videos with DRM |
| Use a custom domain | Mux Video reference | Mux Video reference | Use a custom domain for streaming |
| Monitor playback with Mux Data | Mux Data guide, Mux Data reference | Mux Data guide, Mux Data reference | |
| Cast to Google Cast devices | Casting | Casting | |
| Play live streams | Live streams | Live streams | |
| Customize the player UI | Customize skins, UI components | Customize skins, UI components | |
| Move from Mux Player | Migrate from Mux Player | Migrate from Mux Player |
To play a video with a signed playback policy, sign a separate token for each URL the player requests, and pass each one in the matching source field:
| Token | JWT audience (aud) | Used for |
|---|---|---|
source.playback.token | v | The video stream |
source.poster.token | t | The poster image |
source.storyboard.token | s | Timeline hover previews |
If the poster or storyboard token is missing, the media doesn't request that image. The video still plays, but without a poster or hover previews.
For DRM, also pass the DRM license token (audience d) as source.drm.token. See Protect videos with DRM.
Still using @mux/videojs-kit? See Legacy Video.js kit.