Video is hard. Encoding, serving the right version to the right browser, device optimization, bandwidth consideration, it’s all pretty daunting. Thankfully there’s and the new , which allow you to add best-in-class video delivery to your application without the headache. Mux Mux Videos Extension In this overview, I’m going to show you how to use the to power video content in your application in just a few clicks using the . As a bonus, I’ll show you how to create your own to connect to your favorite API services in your Cosmic JS Dashboard. Mux Videos Extension Cosmic JS Headless CMS Cosmic JS Extension 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 to their team. “Cosmic JS” What is 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 Mux and are a powerful combination. By installing the 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. Cosmic JS Mux Videos Extension How to install the Mux Extension To install the Mux Videos Extension, and navigate to . Click the tab to browse all the pre-built Extensions. From there, find and install the Mux Videos Extension. log in to your Cosmic JS account Your Bucket > Settings > Extensions Extensions After installing, you will be redirected to the Extension settings page. Under , you will need to provide the Mux API credentials on your Mux account ( , ). You can follow the steps to get your Mux API credentials. Query Parameters mux_access_token mux_secret here 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 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 property located in the Object metadata. Mux Videos mux_playback_url Implementation Simply add the Mux playback URL to your HTML Video player. Here’s an example: < = > video id "myVideo" controls </ > video  < = > script src "https://cdn.jsdelivr.net/npm/hls.js@0.8.2" </ > script < > script ( { playbackId = ; url = +playbackId+ ; (Hls.isSupported()) { video = .getElementById( ); hls = Hls();
      hls.loadSource(url);
      hls.attachMedia(video);
    }
  })(); ( ) function // Replace with your asset's playback ID var "oIdQlddn3YGhfCK00Mkj0169KMArk2s701Q" var "https://stream.mux.com/" ".m3u8" // HLS.js-specific setup code if var document "myVideo" var new </ > 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 and . Check out the . Vue Nuxt Mux Videos Extension codebase on GitHub To create your own Cosmic JS Extension for your Bucket, you need at least the following required files: Cosmic JS extension.json
index.html Extension Settings The file includes basic information for your Extension. Here are the basic fields for the file in the Mux Extension ( ): extension.json extension.json 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 . Since this can be either a static website or SPA, you can use modern frontend development tools like React, Vue, and Angular. Your Bucket > Extensions > Add Extension For more information on building Extensions, check out the . Extension documentation

Fetch

NuxtJS

From WordPress to JAMstack: How to make your website 10x faster

Integrating API-first optimized video using a Headless CMS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps