Community Articles Mux Videos Extension Overview

Mux Videos Extension Overview

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

Install the Mux Videos Extension
Check out the Mux Videos Extension codebase
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:

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.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


An application for book lovers to view a list of their favorite books.
In this tutorial, I'm going to show you how to create a elegant Recipe App using Vue2, Vuex, Vuetify and Cosmicjs.
To demonstrate how easy it is to get started with Cosmic JS, we'll utilize the Cosmic JS CLI to quickstart a React Auth App. This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic JS API. This app has all the basic modules like signin, signup, view/edit profi
In this blog we'll quickstart a React ToDo App using the Cosmic JS CLI. This is a simple todo application that consumes the Cosmic JS API and is built using React, Redux, Node.js and Webpack.
Build a static web page for your company or personal portfolio using the Gatsby static site generator and the Cosmic JS Content Management Platform.
In this tutorial, we're going to build a digital shrine to the great musical artists of our time and to listening to music by album - the way great artists meant it to be listened to! In the process, you'll learn a little bit about Cosmic JS, React, CSS Grid, Flexbox, Material UI and Spotify's aweso

Ready to Get Started?

No payment info required.
Start Now   Contact Sales