Integrating API-first Optimized Video Using a Headless CMS

Video is hard. Encoding, serving the right version to the right browser, device optimization, bandwidth consideration, it’s all pretty daunting. Thankfully there’s Mux and the new Mux Videos Extension, which allow you to add best-in-class video delivery to your application without the headache.

In this overview, I’m going to show you how to use the Mux Videos Extension to power video content in your application in just a few clicks using the Cosmic JS Headless CMS. As a bonus, I’ll show you how to create your own Cosmic JS Extension to connect to your favorite API services in your Cosmic JS Dashboard.

TL;DR

If you’re not yet a Mux customer, they’re offering a $50 credit to Cosmic JS customers! Create an account and mention “Cosmic JS” to their team.

What is Mux?

Mux is an API-first video service that helps you provide the highest quality videos to your users. By using their video steam URL to host your videos, you can be sure that your users will receive the most optimized version of the video across all devices and network bandwidth limitations.

Mux and Cosmic JS are a powerful combination. By installing the Mux Videos Extension to your Cosmic JS Bucket, you will be able to upload videos directly to Mux from your Cosmic JS Dashboard. Use the saved Mux Video URLs in your content to deliver the highest possible quality video experiences to your end users.

How to install the Mux Extension

To install the Mux Videos Extension, log in to your Cosmic JS account and navigate to Your Bucket > Settings > Extensions. Click the Extensions tab to browse all the pre-built Extensions. From there, find and install the Mux Videos Extension.

After installing, you will be redirected to the Extension settings page. Under Query Parameters, you will need to provide the Mux API credentials on your Mux account (

mux_access_token

mux_secret

). You can follow the steps here to get your Mux API credentials.

After entering the credentials, save your Extension. And you’re good to go!

How does the Extension work?

After installing the Extension and setting your Mux account keys, click the Mux Videos Extension link in the lefthand nav. Next, upload your videos. The Extension saves the uploaded video data to the Mux Videos Object Type. Now you can add your Mux Videos to any Object using an Object Metafield. Then you can fetch Mux data into your application by using the

mux_playback_url

property located in the Object metadata.

Implementation

Simply add the Mux playback URL to your HTML Video player. Here’s an example:

<video id="myVideo" controls></video>

<!-- Use HLS.js to support the HLS format in browsers. -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@0.8.2"></script>
<script>
  (function(){
    // Replace with your asset's playback ID
    var playbackId = "oIdQlddn3YGhfCK00Mkj0169KMArk2s701Q";
    var url = "https://stream.mux.com/"+playbackId+".m3u8";

    // HLS.js-specific setup code
    if (Hls.isSupported()) {
      var video = document.getElementById("myVideo");
      var hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(video);
    }
  })();
</script>

Check at CodeSandbox: https://codesandbox.io/s/qqk777l5k4

Conclusion

By using the Mux Videos Extension, your users will thank you for delivering high-quality videos to them, optimized to their specific device and bandwidth. This is another way that Cosmic JS is integrating with the best tools available, helping you create great application experiences that create more happy users.

For best practices in implementing the Mux streaming URL, consult the Mux documentation.

Bonus: How to create your own Cosmic JS Extension

The Mux Videos Extension was built using Vue and Nuxt. Check out the Mux Videos Extension codebase on GitHub.

To create your own Cosmic JS Extension for your Cosmic JS Bucket, you need at least the following required files:

extension.json
index.html

Extension Settings

The

extension.json

file includes basic information for your Extension. Here are the basic fields for the

extension.json

file in the Mux Extension (see the full file here):

{
  "title": "Mux Videos",
  "font_awesome_class": "fa-film",
  "image_url": "https://cosmic-s3.imgix.net/ee0ef100-052b-11e9-a865-4d928f17b796-mux.png?w=600"
}

From here, you simply create a static website with this file in the root folder and you upload it to Your Bucket > Extensions > Add Extension. Since this can be either a static website or SPA, you can use modern frontend development tools like React, Vue, and Angular.

For more information on building Extensions, check out the Extension documentation.