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.

You may also like


Learn how I built the Twitter Search Extension to search and save Tweets to your Bucket.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a Vue.js Music App. This Music website was built using Vue, Nuxt and Cosmic. Users can upload and play tracks, upload and manage album art plus leave comments.
A website boilerplate satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.
In basically one Saturday, I was able to move from a confining WordPress instance for my blog to a blazing fast new blog fueled by Cosmic. This flexibility is going to enable me to improve my blog how I want to, serve my content how I want to, design my workflow how I want to.
In this video, Cosmic co-founder Tony Spiro takes you on a tour of the new Cosmic CLI which allows you to do all of the awesome things you can with the Cosmic API, from the comfort of your command line interface.
Cosmic makes it easy to manage content for your Bootstrap applications. In this blog we'll quickstart a Bootstrap Landing Page using the Cosmic CLI. This single page website landing page is built using Node.js and a minimal theme from Start Bootstrap.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales