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.

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.

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

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.

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

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

• Add a caption to describe your video/audio file. If you run a multi-language application, you can easily localize image captions.
• Set alignment to define the position of a video/audio file on a web page.

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.

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:

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

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.

query {
 Blog (id: "85a98d9c-3ab8-476d-9ef1-a00b6ed79a2d") {
   media {
     _id
     playback_id
     url
    }
   }
}

curl --location --request POST 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"{Blog (id: \"85a98d9c-3ab8-476d-9ef1-a00b6ed79a2d\") { media { _id playback_id url}}}","variables":{}}'

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var graphql = JSON.stringify({
  query: "{Blog (id: \"85a98d9c-3ab8-476d-9ef1-a00b6ed79a2d\") { media { _id playback_id url}}}",
  variables: {}
})
var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: graphql,
  redirect: 'follow'
};

fetch("https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

// WARNING: For POST requests, body is set to null by browsers.
var data = JSON.stringify({
  query: "{Blog (id: \"85a98d9c-3ab8-476d-9ef1-a00b6ed79a2d\") { media { _id playback_id url}}}",
  variables: {}
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);

<?php
$client = new Client();
$headers = [
  'Content-Type' => 'application/json'
];
$body = '{"query":"{Blog (id: \\"85a98d9c-3ab8-476d-9ef1-a00b6ed79a2d\\") { media { _id playback_id url}}}","variables":{}}';
$request = new Request('POST', 'https://graphql.prepr.io/<YOUR-ACCESS-TOKEN>', $headers, $body);
$res = $client->sendAsync($request)->wait();
echo $res->getBody();

{
   "data": {
       "Blog": {
           "media": [
               {
                   "_id": "7505fb7f-11f5-43d8-b31a-9c3f39e051db",
                   "playback_id": "J241G7u6XR",
                   "url": "https://stream.mux.com/mU2og2fKCCBU87YNVxJ8.m3u8"
        }
      ]
    }
   }
}

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:

• Live video stream
• Images
• Files