Video and Audio

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

Introduction

Video and audio have become one of the most popular ways that people consume content. You can use video and audio in a variety of ways: from brand videos to instructional videos to audiobooks and news reports, and many more. Whatever goal you have, Prepr will help you embed your video/audio files in a web application with ease.

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 in our blog post.

To play video/audio in a web application, you need to complete the following steps:

  1. First, allow using assets in a model.
  2. Next, add a video/audio file to a content item.
  3. Then, add a web player to your front end.
  4. Finally, retrieve a video/audio file using the API.

See the detailed instructions below.

⚠️

Starting from June 22nd, 2022, the Mux integration is available to all new Prepr customers by default. If you’ve joined Prepr before this date, you can request a migration from the deprecated AWS integration to the Mux integration anytime. Please contact us at prepr.io/support (opens in a new tab).

⚠️

This guide assumes you have already set up a content model. If not, we recommend starting with the following steps:

Step 1: Add an Assets field to your model

To use assets in your content items, you must first add the Assets field to a content model as follows:

  1. Click the Schema tab to open the Schema Editor.
  2. Click on a model to open its details.
  3. Click or drag the Assets field from the list of field types into your model.

Add Assets field

  1. Fill in the Assets field settings, then click Save to confirm. For more information, check out the Field types guide.

Fill in Assets field settings

⚠️

Make sure to select the Video and Audio asset type in the General tab to allow adding video or audio files accordingly to this field.

In the Settings tab, you can also enable the Caption and Alignment features to configure your video/audio in the Prepr Editor interface. For more information, see the Add a file to a content item step.

Once done, you can add a video/audio file to your content item.

Step 2: Add a file to a content item

Now that you have allowed using assets in a model, you can add video/audio to your content item as follows:

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

  2. On the Content item page, go to the media placeholder and click the icon.

Add asset to a content item

  1. Select one or multiple video/audio files from the Media Library or upload new ones.
  2. Click Add x items to confirm.

Select asset

Optionally, you can edit your video/audio in the Prepr Editor interface as follows:

On the Content item page, hover over a video/audio file and click the icon in the top right corner, then select the needed action.

Configure asset

⚠️

These features are only available if enabled in the Assets field settings.

Once done, proceed to the next step.

Step 3: Add a web player to your front end

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:

Check out other options in the Mux documentation (opens in a new tab).

You can add subtitles to your videos (supported for the Mux player only) and set a custom video thumbnail (available for all web players). Learn more in Edit and configure assets.

Step 4: Retrieve video/audio using the API

Once you have completed the previous steps, you can retrieve your video/audio file using the API to integrate with a web player.

Use the following snippets as a starting point to retrieve your live stream via the API. You may want to add or remove arguments according to your desired setup. For more information, see the GraphQL API reference.

⚠️

To retrieve a playback_id, make sure you use the GraphQL API token version of 2022-08-15 or later.

⚠️

To integrate your video 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 {
 Blog (id: "85a98d9c-3ab8-476d-9ef1-a00b6ed79a2d") {
   media {
     _id
     playback_id
     url
    }
   }
}

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 and audio file become 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:

Was this article helpful?

We’d love to learn from your feedback