Adding video and audio to web apps

Define the Assets field in your model

To allow editors to add video or audio to content items, you need to add the Assets field to the corresponding model as follows:

1. Click the Schema tab and click the model you want to update.

3. You can simply add an Assets field to your model or as shown in this Blog article example, click to open an existing Dynamic content field and go to the Settings tab.

4. Go to the Assets section and enable Video, Audio, and any other settings you need for the video or audio such as Caption.

For more information on different settings, check out the Field types guide.

Now, content editors can add and configure a video or audio when they create or edit a blog article content item.

Add video or audio to a content item

Now that you’ve allowed content editors to add a video or audio file to content items for a model, let’s look at the typical steps a content editor follows to do this.

1. Navigate to the Content tab. You can either create a new content item or use an existing one.

2. You can simply add a video or audio to your content item or like in this example, go to the Dynamic content editor, click the icon and drag the video or audio file from your local storage to the asset block.

3. You can also configure your video/audio file, if enabled in the settings, by hovering over the video/audio file and clicking the icon in the top right corner, then selecting the needed action.

   • Edit caption to describe the video/audio file. If you run a multi-language application, content editors can easily manage captions in multiple languages.
   • Set alignment to define the position of a video/audio file on a web page.

4. You can add subtitles to your videos directly in Prepr (For Mux Player only) and set a custom video thumbnail.

Now that you have content items with video or audio files, let’s look at how to retrieve them in your front end.

Retrieve video/audio using the API

Before you can render any video or audio in your front-end, you need to retrieve these assets using the API. You can retrieve the following fields needed to render video or audio assets:

• playback_id, the unique ID generated in Mux when a video or audio file is stored in Prepr.
• cover, if the thumbnail is set for the video asset.
• url, the video URL in the format: https://stream.mux.com/{PLAYBACK_ID}.m3u8. If you use Mux Player to render your video in your front end, the playback_id is sufficient.

For more information on other fields you can include in your query, check out the GraphQL API reference.

query {
  BlogArticle (id: "36136491-a333-44be-a53f-111ef759779c") { 
    _id
    title
    _slug
    content {
      __typename
      ... on Assets {
        _type
        name
        items {
          _id
          playback_id
          url
          duration
          caption
 
          # Request thumbnail image
          cover
 
          alignment
        }
      }
    }
  }
}

{
  "data": {
    "BlogArticle": {
      "_id": "36136491-a333-44be-a53f-111ef7597",
      "title": "Navigating the 2026 Tax cliff",
      "_slug": "navigating-the-2026-tax-cliff",
      "content": [
        {
          "__typename": "Assets",
          "_type": "Assets",
          "items": [
            {
              "_id": "87d4d8ec-c5ac-41cd-a76c-bf2df3fb6",
              "playback_id": "rLd2ccyWjh02hapHW01tRUFNgYdSx02zIDY200kgKmzj",
              "url": "https://stream.mux.com/rLd2ccyWjh02hapHW01tRUFNgYdSx02zIDY200kgKmzj.m3u8",
              "duration": 23000,
              "caption": "Cars in motion",
 
              // Thumbnail image
              "cover": "https://image.mux.com/rLd2ccyWjh02hapHW01tRUFNgYdSx02zIDY200kgKmzj/thumbnail.jpg",
 
              "alignment": null
            }
          ]
        }
      ]
    }
  }
}

Add a web player to your front end

Now that you’ve retrieved the video/audio asset for displaying, you can add your chosen web player to your web application. Because Mux delivers your videos in the HTTP Live Streaming (HLS) format, we recommend using a player that supports HLS such as the Mux Player  For other popular web players, check out the Mux documentation .

The instructions below show you how to install and set up the Mux Player.

1. For standard video and audio files, install the Mux player package in your project with the following command line:

npm install @mux/mux-player

2. If you’re only rendering background videos such as those for more dynamic background hero sections, then install the lightweight Mux Background Video component  instead:

npm install @mux/mux-background-video

3. Get the playback_id, and if needed, the video thumbnail (cover) you retrieved in the previous step.

   If subtitles are added to videos in Prepr, these can only be rendered automatically with the Mux Player.

4. For video or audio files, you can import the Mux player like in the code snippets below.

Example player components

// components/MuxVideoPlayer.js
'use client';
import '@mux/mux-player';
 
export default function MuxVideoPlayer({ playbackId, title, poster}) {
  return (
    <mux-player
      playback-id={playbackId}
      metadata-video-title={title}
      poster={poster}
      stream-type="on-demand"
      style={{ aspectRatio: '16/9', width: '100%' }}
    >
    </mux-player>
  );
}

// components/MuxAudioPlayer.js
'use client';
import '@mux/mux-player';
 
export default function MuxAudioPlayer({ playbackId, title }) {
  return (
    <mux-player
      playback-id={playbackId}
      metadata-video-title={title}
      style={{ height: '80px', width: '100%' }}
    />
  );
}

// components/HeroVideo.js
'use client';
import { MuxBackgroundVideo } from '@mux/mux-background-video/react';
 
export default function HeroVideo({ src, poster }) {
  return (
    <MuxBackgroundVideo 
      src={src} 
      style={{ width: '100%', height: '100vh', objectFit: 'cover' }}
    >
      {/* Fallback image */}
      <img src={poster} alt="Background video fallback" />
    </MuxBackgroundVideo>
  );
}
 

5. You can then render the video or audio in the relevant pages in your front end like in the example code snippet below:

// app/blog/[slug]/page.js
import MuxVideoPlayer from '@/components/MuxVideoPlayer';
 
export default async function Page({ params }) {
  const data = await getPreprData(params.slug);
  
  return (
    <article>
      <h1>{data.title}</h1>
      
      <MuxVideoPlayer 
        playbackId={data.video.playback_id}
        title={data.title}
        poster={data.video.cover}
        subtitleUrl={data.video.caption_url}
      />
    </article>
  );
}

That’s it. Once you publish your content item, your video or audio file becomes available in your web application in the best possible format.