Shopify + Sanity: Read about the investment and partnership –>
Skip to content
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • Cloudflare - Flexible modeling for a global CDN
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Technology partners
  • Get support
  • Share your work
  • Shopify Invests in Sanity: Connecting Commerce with Content
PricingContact salesLog inGet started
Published November 30th 2018

First class responsive video support with the new Mux plugin

When building Sanity, we placed much emphasis on building out a super flexible image pipeline that can transform and re-crop your images for you. We have no ambition of doing the same for video.

Knut Melvær

Knut runs developer relations at Sanity.io.

When building Sanity, we placed much emphasis on building out a super flexible image pipeline that can transform and re-crop your images for you. We have no ambition of doing the same for video.

When Mux reached out to us about integrating with their video streaming and analytics platform we had no doubts that it would be a good fit.

Who is Mux?

Mux was founded in 2015 by Jon Dahl, Steve Heffernan, Matt McClure, and Adam Brown. Jon and Steve were the co-founders of Zencoder, which got acquired by Brightcove. With a team of engineers from YouTube, Twitch, Brightcove, and Facebook, they're now leading one of the best cloud-based video services on the web.

Mux is an API-first video platform for streaming and analytics. What sets them apart is their self-optimizing encoding and delivery technology. The service provides high-quality streams for your users that adapt to device, and network conditions. What you also get is transparency on how your videos perform. Mux makes this easily accessible with Mux Data, which gives you detailed video performance metrics – in real-time.

The performance and functionality of Mux are excellent. Store your full resolution master file with Mux and request whatever format you need – HLS for streaming, MP4 for downloads. Even GIF if you need it. From your frontends, apps, and digital services you can request exactly the format you need.

Get started with the mux-video plugin

The Mux plugin for Sanity gives you a way to upload and preview videos easily.

Installation

Run this command in your Sanity project folder:

sanity install mux-input

Use in Schema

To use the Mux video input, you create a field as you otherwise would, and use mux.video for the type.

export default {
  name: 'catVideos',
  type: 'mux.video'
}

Add API keys

Register for Mux (if you tell them “sanity” they'll give you $50 worth in credits ✨). If you don’t yet have a project on Sanity - we’ve made a special offer also.

The token needs full access to upload files

Once you're logged in to Mux, find the “Access Tokens” page in the settings menu. Generate new tokens with full access on Mux Video and Read on Mux Data, and have them handy for the next step.

Back in Sanity Studio, find the document where your video field appears, and click the plug-icon 🔌on the Paste your Access Token and Secret Key.

Enter your Mux API credentials

Uploading a video

Uploading a video is easy: Use the select button to open the file explorer on your system, drag the file right into the input area, or paste the URL (like I do in the video) to the video in the field. Once it's done uploading, you can select the thumbnail you want for the preview.

Querying it with GROQ

In this example, we have added the Mux video as a custom block in rich text. We can then use GROQ to generate the URL for the stream on the frontend. Here we also use concatenation to get the streaming URL out of the box.

*[_type == "post"]{
  ...,
  text[]{
  	...,
	  _type == "muxVideo" => {
  		...,
	  	asset->{
  			...,
	  		"url": "https://stream.mux.com/" + playbackId
			}
		}
	}  
}

If we pick out the asset data from the response to this query, we'll get something like this:

{
  "_key": "121c8c30a649",
  "_type": "muxVideo",
  "asset": {
    "_createdAt": "2018-11-30T18:27:21Z",
    "_id": "066e45f9-e2e6-4537-8b40-05f8c0f334d9",
    "_rev": "0xLJdqcI4pgly0b1J2cj0o",
    "_type": "mux.videoAsset",
    "_updatedAt": "2018-11-30T18:27:27Z",
    "assetId": "KdUXsmAKryppWd1wPiAtNVhMIqc7cPmL",
    "data": {
      "aspect_ratio": "16:9",
      "created_at": "1543602441",
      "duration": 28.233333,
      "id": "KdUXsmAKryppWd1wPiAtNVhMIqc7cPmL",
      "master_access": "none",
      "max_stored_frame_rate": 30,
      "max_stored_resolution": "HD",
      "mp4_support": "none",
      "passthrough": "066e45f9-e2e6-4537-8b40-05f8c0f334d9",
      "playback_ids": [
        {
          "id": "NZQMBbYtVa6pDebOjB8wXRNQvao3RWrv",
          "policy": "public"
        }
      ],
      "status": "ready",
      "tracks": [
        {
          "duration": 28.142585,
          "id": "Tcte02pHV5iGVYDUqGX5hiT5XqgB8pMym",
          "max_channel_layout": "stereo",
          "max_channels": 2,
          "type": "audio"
        },
        {
          "duration": 28.166,
          "id": "ocguJveQvPh95zPcnuitsLLXvLYaTAMwPfgDoqFLD01Q",
          "max_frame_rate": 30,
          "max_height": 1080,
          "max_width": 1920,
          "type": "video"
        }
      ]
    },
    "filename": "upload video with mux.mp4",
    "playbackId": "NZQMBbYtVa6pDebOjB8wXRNQvao3RWrv",
    "status": "ready",
    "url": "https://stream.mux.com/NZQMBbYtVa6pDebOjB8wXRNQvao3RWrv"
  }
}

As with our image pipeline, we make sure to have the metadata readily available. This means that you also easily can query for video assets by all these keys. For example will the query *[_type == "mux.videoAsset" && data.aspect_ratio == "16:9"] return all uploaded videos with a letterboxed aspect ratio.

Video playback on the frontend

The final piece of the puzzle is to get your videos to your end users. You can integrate videos on Mux with all sorts of stuff, be it the web, apps, TV platforms, or even offline by providing your users with an mp4-download. We made a video player for React that is easy to integrate into your project. Check it out on GitHub or in the CodeSandbox beneath.

First class video support

We're super happy that Mux reached out to us, and that we get to stand on their shoulders when it comes to video support. We are planning to improve the integration even further, and we're stoked to see what you will make with it. For a more technical and in-depth read about integrating Mux on web frontends, do check out the blog post by our friends in ZEIT, who just launched their new platform ZEIT TV using Mux.

And finally, a cat video. Because everyone should have at least one cat video in their video archive.

Page content

  • Who is Mux?
  • Get started with the mux-video plugin
    • Installation
    • Use in Schema
    • Add API keys
    • Uploading a video
    • Querying it with GROQ
    • Video playback on the frontend
    • First class video support

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance

Resources

Documentation
  • Content Modeling
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • React Starters
  • Next.js Starters
  • Next.js Landing Pages
  • Next.js E-commerce
  • Gatsby Starters
  • Gatsby Plugins
  • Developer Portfolio Templates
Case Studies
  • Headless CMS
  • Digital Experience Platform
  • Static Site Generator
  • Localization
  • GraphQL vs REST
  • React CMS
  • Next.JS CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS

Company

Contact SalesEnterpriseCareersTerms of Service

Stay connected

  • Github
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS

Subscribe to our newsletter

©Sanity 2022