Skip to Content
DevelopmentBest practicesAssetsVideo & audio

Adding video and audio to web apps

Follow this guide to learn how to add video and audio files to your web application.

Introduction

Prepr simplifies asset management and provides multi-format support so you can embed video and audio files in your web application. This guide covers the end-to-end workflow from defining video/audio assets in your Prepr schema, adding these assets to content items and fetching them via the API.

Prerequisites

You need to have the following setup before you can embed video and audio files in your web application.

For more information on how to set up a content model in Prepr, check out the content modeling basics. If you’re still unsure about how to structure your content, check out our example models for inspiration.

Embedding video and audio files in your web application

The steps below make use of the example of including a video or audio file in the content (Dynamic content field) of blog articles.

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.

Add assets to dynamic content field

  1. 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.

  2. 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.

Add video to content item

  1. 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.

  2. 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.

  3. 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 add a web player to your front end.

Add a web player to your front end

Mux integration
All the video and audio files uploaded to Prepr are stored in and played from Mux. You can read more about the Prepr and Mux integration on our website .

Now that you’ve prepared a video/audio file for displaying, you can choose which web player to use in your web application.

Because Mux delivers your videos in the HTTP Live Streaming (HLS) format, we recommend using a player that supports HLS. Here are some popular players you may want to use:

  • Mux Player  is a native player developed by Mux.
  • HLS.js  is free and open source. HLS.js will be a good choice if you want to use the HTML5 video element’s default controls or build your own UI elements.
  • Agnoplay  is a fully agnostic, cloud-based player solution for web, iOS, and Android.
  • JWPlayer  is a commercial player that supports HLS by default and uses HLS.js as an underlying HLS engine.

Check out other options in the Mux documentation .

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

Once the web player is implemented, you can now fetch the content items with embedded videos or audio files.

Retrieve video/audio using the API

Now let’s retrieve your video/audio file using the API and integrate it with your chosen web player.

Use the following snippets as a starting point to retrieve a video or audio via the API. You may want to add or remove fields according to your desired setup. For more information, check out the GraphQL API reference.

To integrate your video or audio file with a 3rd party player, make sure to include the url field in your API request. It will return a video URL in the format: https://stream.mux.com/{PLAYBACK_ID}.m3u8. For Mux Player, including the playback_id is sufficient.

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

Fo more details on customizing the thumbnail for your Mux video, check out the Mux docs .

Please check out the Connecting front-end apps guide to learn more about retrieving content in a specific front-end framework.

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.

Want to learn more?

Check out the following guides to learn how to add other asset types to your web application:

Last updated on
ImagesLive video stream