Integrate with Sanity

1. Install Mux plugin

Run this command in your Sanity project folder:

npm i sanity-plugin-mux-input

2. Use in a schema

Make a schema type and use mux.video for the type.

{
  "title": "Video blog post",
  "name": "videoBlogPost",
  "type": "document",
  "fields": [
    { "title": "Title", "name": "title", "type": "string" },
    {
      "title": "Video file",
      "name": "video",
      "type": "mux.video"
    }
  ]
}

You also need to import the Mux plugin and include it in your plugin list.

import { defineConfig } from 'sanity';
import { muxInput } from 'sanity-plugin-mux-input';

export default defineConfig({
  plugins: [muxInput()],
});

3. Enter Mux credentials

Generate a new Access Token by going to the Access Token settings of your Mux account dashboard.

The access token should have Mux Video Read and Write permissions as well as Mux Data (read-only).

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

4. Upload video

Use the select button to open the file explorer on your system, drag the file right into the input area, or paste the URL to the video in the field. Once it's done uploading, you can select the thumbnail you want for the preview.

To retrieve your video for playback, check out the Sanity docs for instructions.

5. Explore advanced options

Signed Tokens

By default, all assets uploaded to Mux through Sanity will be created with a playback policy of "public". This means that your videos and thumbnails are accessible with https://stream.mux.com/{PLAYBACK_ID}.m3u8 and https://image.mux.com/{PLAYBACK_ID}/thumbnail.jpg.

If you want more control over delivery of the playback and thumbnail access, you can enable this feature on the Sanity configuration popover:

When you enable this feature, the following things will happen:

1. The Mux Plugin in Sanity will use the Mux API to create a URL signing key and save this with your secrets document.
2. Any assets that get created while this feature is enabled will be created with playback_policy: "signed" (instead of "public").
3. The signing key from Step 1 will be used by the Mux Plugin to preview content inside the Sanity UI.
4. When you access your content in your own application, use the MuxAsset.data.playback_ids property to determine if the asset has a signed or public policy.

{
  "_id": "0779365f-bbd1-46ab-9d78-c55feeb28faa",
  "_type": "mux.videoAsset",
  "assetId": "fNMFNYMq48EwgJM7AIn1rNldiFBcVIdK",
  "data": {
    "playback_ids": [
      {
        "id": "01cBJKm5KoeQii00YYGU7Rvpzvh6V01l4ZK",
        "policy": "public"
      }
    ]
  },
  "status": "ready"
}

5. You should use the signed playbackId to create URLs for playback and for thumbnail generation.

• Playback https://stream.mux.com/{SIGNED_PLAYBACK_ID}.m3u8?token={TOKEN}
• Thumbnails https://image.mux.com/{SIGNED_PLAYBACK_ID}/thumbnail.jpg?token={TOKEN}

6. The TOKEN parameter for the above URLs is something you create on your server according to Step 2 in Secure video playback

Note that in the Sanity UI when an asset is using a signed URL you will see this green notice.

Encoding Tiers

When uploading a new video, you can select which Encoding Tier is used when preparing the Asset. Possible selections are Smart and Baseline. When choosing Smart, additional options are made available for maximum resolutions (1080p, 2K or 4K).

More details can be found in our Use Encoding Tiers guide.

Static Renditions

When using the Smart Encoding Tier, an option to enable downloadable MP4s will be available. This option will create Static Renditions for the Asset and will make MP4 files available for download to client devices using a formatted URL.

Max Video Resolution

You can specify the maximum resolution to encode the uploaded video. This option is particularly important in managing costs when uploaded videos are higher than 1080p resolution and also allows you to encode and play videos in 2k or 4k resolutions. More information on the feature is available in our docs. Also, read more on this feature announcement in our blog post.

Captions/Subtitles

With Mux's auto-generated captions, you can easily add captions to videos uploaded by selecting the language of the spoken words. When using this auto-generated option, Mux will generate captions automatically while it prepares the Asset. More details can be found in the Add auto-generated captions to your videos and use transcripts section of our documentation.