Mux Videos Extension Overview

Community Articles
Community Articles 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 Extension to connect to your favorite API services in your Cosmic 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 customers! Create an account and mention “Cosmic” 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 are a powerful combination. By installing the Mux Videos Extension to your Cosmic Bucket, you will be able to upload videos directly to Mux from your Cosmic 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 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 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 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 Extension for your Cosmic 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


Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.
Cosmic lets you build one-to-one as well as one-to-many Object Relationships within your Bucket Dashboard. To help you and your team manage content more seamlessly, you can now see your Connected Objects located on the Object’s Edit page in the Dashboard.
We recently released Cosmic Functions (public beta). We're excited to help teams build amazing modern products together with new serverless solutions.
This is a JAMstack app with the power of Cosmic. In JAmstack, Vue.js is used as Javascript part, Cosmic as API and Nuxt.js as Markup.
For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we're going to build an e-commerce website using Nuxt and Cosmic.
In this tutorial, I'll show you how to deploy your Gatsby Blog to Netlify and trigger automatic rebuilds on content edits using Cosmic Webhooks.

Ready to Get Started?

No payment info required.
Start Now Contact Sales