This documentation covers how developers might integrate Mux Video with external technologies # Using the Mux MCP Server Use the Mux Model Context Protocol (MCP) Server to bring Mux's Video and Data platform capabilities directly to your AI tools. The Mux MCP ([Model Context Protocol](https://modelcontextprotocol.io/introduction)) Server brings Mux's Video and Data platform capabilities directly to your AI tools. Once set up, you can upload videos, manage live streams, analyze video performance, and access practically all of Mux's video infrastructure through natural language prompts in supported AI clients. This guide walks you through the functionality in Mux's MCP server, and connecting it to various AI clients. ## Tools & Routes Here are the following tools and API routes supported in the local Mux MCP Server: * **Video API**: Create assets, uploads, live streams, playback URLs * **Data API**: Query metrics, dimensions, real-time data * **Webhook management**: List and verify webhook signatures * **Asset management**: Retrieve, update video metadata * **Live streaming**: Create streams, manage recordings * **Analytics**: Performance metrics, viewer data, error tracking Here are the tools and routes we don't currently support in the local Mux MCP Server. Generally speaking, these are composed of endpoints which can execute deletions, and are disabled for safety: * Asset deletion endpoints * Live stream deletion endpoints * Webhook deletion endpoints ## Prompt examples **Video Management** * Using the Mux tool, create a webpage where I can upload a video to Mux * Give me the playback URL for the most recently uploaded video to my Mux account, use Mux MCP * List all my video assets and their current status (using the Mux MCP tool) * With the Mux tool: Show me recent video uploads * Using Mux MCP, generate a subtitles track for asset ID: `ASSET_ID` **Mux Data Analytics and Performance** * Using the Mux MCP, tell me the best performing country for video streaming over the last month * Show me video performance metrics for the last week using the Mux tool * With the Mux tool: what are the top performing videos by view count? * Using Mux, which countries have the highest video engagement? * What are the most common video errors in my account (use the Mux MCP)? * Show me breakdown values for video quality metrics using the Mux MCP tool * List all available data dimensions I can filter by, use the Mux MCP to answer this prompt ## Prerequisites Before utilizing the Mux MCP Server, make sure you meet the following prerequisites: * A Mux account (sign up at [mux.com](https://mux.com/) if you don't have one) * Claude Desktop, Cursor, or any other client that supports remote MCP servers, installed and updated to the latest version ## Configuring the Mux MCP Server Mux's MCP server is hosted at https://mcp.mux.com, and when using this remote MCP server, authentication should be handled automatically, with no need for grabbing Access Token information from the Dashboard. In order to configure the Mux MCP server in your client, you need to add an MCP server, which is sometimes called a "connector" (Claude/Claude Code/ChatGPT), an "extension" (Goose), or simply an MCP Server (VSCode), and enter the URL `https://mcp.mux.com` as the location. Once configured, the LLM client and our MCP server should negotiate authentication and authorization, prompting you automatically to: * Log in to https://dashboard.mux.com via whatever means you normally log in (this is skipped if you're already logged in) * Choose which environment you want to authorize this connection for When you're already logged in, your experience will look something like this: And that's it, you're good to go! ### Configuration options By default, https://mcp.mux.com will be configured in the simplest manner (though this may change in the future), exposing access to the full set of tools available to Mux. That said, depending on your workflow, you may want to limit this set of tools in some way. For that reason, Mux supports query parameters to configure the MCP server. A more complete set of configuration options can be [seen here](https://github.com/muxinc/mux-node-sdk/tree/master/packages/mcp-server#exposing-endpoints-to-your-mcp-client), and most of those work simply as query params. However, a few bear mentioning directly: * `tools`: options are `all` (default), and `dynamic`. * Use `dynamic` if you want to expose tools mean to [allow the LLMs to dynamically discover endpoints and tools](https://github.com/muxinc/mux-node-sdk/tree/master/packages/mcp-server#exposing-endpoints-to-your-mcp-client), which can aid in controlling context windows and speeding up processing if a lot of tools are available. * `resource`: array of resources (sets of APIs) to expose, such as `video.*`. These act as an inclusion set, rather than excluding, so you can chain multiple to expand the list of tools. Some options include: * `video.*`: all Mux Video APIs * `data.*`: all Mux Data APIs * `system.*`: all System APIs, such as managing Signing Keys * `video.asset.*`: the APIs used to manage Mux Video assets * ...and so on * `client`: options are `claude` (default), `claude-code`, `cursor`, `openai-agents`. * Each LLM has varying support for capabilities related to complex JSON schemas, and these are tested defaults for each of the known clients. You can read more about this in [this doc by Stainless](https://www.stainless.com/docs/guides/generate-mcp-server-from-openapi#client-capabilities). You can also chain these together. For instance, if you want to configure an MCP server that exposes *only* the Video APIs, but does it in a dynamic way, for Cursor, you'd just use `https://mcp.mux.com?client=cursor&resource=video.*&tools=dynamic` as your remote URL. ## A note on remote MCP support These days, most LLM clients directly support remote MCP servers (rather than locally installed ones), so you shouldn't have much trouble getting set up. That said, there are still some clients (particularly older versions) that don't have built-in remote MCP support (such as Goose as of the time I wrote this guide). For those situations, you have two options: 1. You can still [install our MCP server locally](/docs/integrations/installing-mcp-server-locally) 2. You can utilize [mcp-remote](https://www.npmjs.com/package/mcp-remote), which brings support for remote MCP servers to practically any LLM client (and may perform better than the built-in remote MCP support depending on the client). ## Having trouble? If you run into issues or have questions: * Check the [Model Context Protocol documentation](https://modelcontextprotocol.io/quickstart/user) for general MCP setup guidance * Review [Claude's MCP documentation](https://docs.anthropic.com/en/docs/agents-and-tools/mcp) for Claude-specific configuration * Visit our [API reference](https://docs.mux.com/api-reference) for detailed endpoint documentation * Contact support: [mux.com/support](/support) # Install the local Mux MCP Server Set up the Mux Model Context Protocol (MCP) Server locally to bring Mux's Video and Data platform capabilities directly to your AI tools. If you're interested in getting started quickly, and to read more about the MCP server, check out [this guide](/docs/integrations/mcp-server). This guide walks you through building and installing the Mux MCP Server locally on your machine and connecting it to various AI clients. The Mux MCP ([Model Context Protocol](https://modelcontextprotocol.io/introduction)) Server brings Mux's Video and Data platform capabilities directly to your AI tools. Once installed, you can upload videos, manage live streams, analyze video performance, and access practically all of Mux's video infrastructure through natural language prompts in supported AI clients. ## Prerequisites Before installing the Mux MCP Server, make sure you meet the following prerequisites: * Node.js installed on locally on your machine (instructions available [here](https://nodejs.org/en/download)) * A Mux account (sign up at [mux.com](https://mux.com/) if you don't have one) * Your Mux API access token and secret key from the [Mux Dashboard](https://dashboard.mux.com/settings/access-tokens) (detailed instructions are available below) * Claude Desktop, Cursor, or any other client that supports local MCP servers, installed and updated to the latest version ## Installation ### Get your Mux API credentials and configure access 1. Log into your [Mux Dashboard](https://dashboard.mux.com/) 2. Navigate to Settings → Access Tokens 3. Generate a new access token or use an existing one 4. Copy your **Access Token ID** and **Secret Key** - you'll need both for the configuration #### Required Scopes * Your Mux access token should be configured for your desired Environment and read/write access * We recommend clearly labeling this access token in Mux, for example: `MCP Access Token` **Important:** Replace the placeholder values when adding to your AI client's config using the templates provided below: * Replace `your_access_token_id` with your actual Mux Access Token ID * Replace `your_secret_key` with your actual Mux Secret Key **Note:** If you're using a tool that manages Node versions like Mise, you'll probably need to make sure you execute the npx commands found in the following examples from within that context. An example Mise command could look something like this: `mise x node@20 -- npx -y @mux/mcp@latest` Accordingly, the following examples would need to be changed similarly to below: ```json "command": "mise", "args": ["x", "node@20", "--", "npx", "-y", "@mux/mcp@latest","--tools=dynamic","--client=claude"], ``` ### For Claude * You must use Claude's Desktop app to install local MCP servers. We support the recently released [Claude Desktop Extensions](https://www.anthropic.com/engineering/desktop-extensions) format, so you can download [this DXT file](https://github.com/muxinc/mux-node-sdk/releases/download/v12.1.0/mux-mcp.dxt) and open it with Claude Desktop to install it. Once it's installed, configure the environment variables you need and you're good to go. If you'd like to configure it manually, follow the next steps. #### Step A: Configure Claude Desktop Follow [Claude's instructions](https://docs.anthropic.com/en/docs/agents-and-tools/mcp) to locate your Claude Desktop configuration file on your machine. **macOS/Linux:** ``` ~/Library/Application\ Support/Claude/claude_desktop_config.json ``` **Windows:** ``` %APPDATA%\Claude\claude_desktop_config.json ``` #### Step B: Add the MCP Server configuration Add this configuration block to your `claude_desktop_config.json` file: ```json { "globalShortcut": "", "mcpServers": { "mux": { "command": "npx", "args": ["-y", "@mux/mcp@latest","--tools=dynamic","--client=claude"], "env": { "MUX_TOKEN_ID": "your_access_token_id", "MUX_TOKEN_SECRET": "your_secret_key" } } } } ``` #### Step C: Restart Claude Desktop Close and reopen Claude Desktop to load the new MCP server configuration. ### For Cursor #### Step A: Locate the Settings File Follow the paths below to locate your Cursor MCP configuration file. If the file does not exist, you can create it. **macOS/Linux:** ``` ~/.cursor/mcp.json ``` **Windows:** ``` C:/Users//.cursor/mcp.json ``` #### Step B: Add the MCP Server Configuration ```json { "mcpServers": { "mux": { "command": "npx", "args": ["-y", "@mux/mcp@latest","--tools=dynamic","--client=cursor"], "env": { "MUX_TOKEN_ID": "your_access_token_id", "MUX_TOKEN_SECRET": "your_secret_key" } } } } ``` ### For VSCode To add the server to all of your workspaces globally, add the server configuration to your `settings.json` file. #### Step A: Locate the Settings File **macOS:** ``` ~/Library/Application\ Support/Code/User/settings.json ``` **Linux:** ``` ~/.config/Code/User/settings.json ``` **Windows:** ``` %APPDATA%\Code\User\settings.json ``` #### Step B: Add the MCP Server Configuration ```json { "mcp": { "servers": { "mux": { "command": "npx", "args": ["-y", "@mux/mcp@latest","--tools=dynamic"], "env": { "MUX_TOKEN_ID": "your_access_token_id", "MUX_TOKEN_SECRET": "your_secret_key" } } } } } ``` #### Step C: Starting the MCP Server In VSCode, make sure to click on the `Start` button in the MCP Server to start the server. You can do this directly from the settings file, or from the Command Palette with `MCP: List Servers` . ## Verify installation Test that the Mux MCP Server is working by asking your AI client: > Give me the details for the most recently created Mux Video asset (using the Mux tool) or > Using the Mux MCP, list the best performing countries for video streaming over the last month using Mux Data If the installation was successful, Claude will connect to the Mux API through the MCP server and return information about your video performance or assets. ## Troubleshooting **Build Issues** If you encounter errors during the build process: * Make sure you have the correct Node.js version installed, and that npx is accessible in your PATH (`npx -v`) **Connection Issues** If Claude can't connect to the MCP server: * Double-check that your file path in the `args` field is correct and points to the built MCP server file * Verify your Mux credentials are correct and properly formatted * Make sure there are no extra spaces or characters in your token values * Confirm your API tokens have the necessary permissions in your Mux account **Claude Desktop Issues** If MCP features don't appear in Claude: * Ensure you're using the latest version of Claude Desktop - older versions may not support MCP * Verify your JSON configuration is valid (no missing commas or brackets) * Check that Claude Desktop has restarted completely after configuration changes ## Getting help If you run into issues or have questions: * Check the [Model Context Protocol documentation](https://modelcontextprotocol.io/quickstart/user) for general MCP setup guidance * Review [Claude's MCP documentation](https://docs.anthropic.com/en/docs/agents-and-tools/mcp) for Claude-specific configuration * Visit our [API reference](https://docs.mux.com/api-reference) for detailed endpoint documentation * Contact support: [mux.com/support](/support) # Mux CLI Use the Mux CLI to manage your video assets, live streams, and more directly from the terminal. The Mux CLI is a command-line interface for interacting with the Mux API, designed to provide a first-class development experience for working with Mux services locally. With the CLI, you can upload videos, manage live streams, generate signed URLs, query analytics data, and access Mux's video infrastructure without leaving your terminal. ## Installation The Mux CLI can be installed via Homebrew, npm, a shell installer, or by downloading pre-built binaries. ### Homebrew (macOS) ```bash brew install muxinc/tap/mux ``` ### npm Install globally to use the `mux` command anywhere: ```bash npm install -g @mux/cli ``` Or run directly without installing using `npx`: ```bash npx @mux/cli ``` ### Shell installer Run the install script to automatically download and set up the CLI: ```bash curl -fsSL https://raw.githubusercontent.com/muxinc/cli/main/install.sh | bash ``` ### Binary download Platform-specific binaries are available for macOS (Apple Silicon and Intel) and Linux (x64 and arm64) from the [GitHub Releases page](https://github.com/muxinc/cli/releases). These are self-contained executables with no external dependencies. ## Shell completions Enable tab completion for commands, subcommands, and options in your shell: **Bash** (add to `~/.bashrc`): ```bash source <(mux completions bash) ``` **Zsh** (add to `~/.zshrc`): ```bash source <(mux completions zsh) ``` **Fish** (add to `~/.config/fish/config.fish`): ```bash source (mux completions fish | psub) ``` Restart your shell or source the config file to activate completions. ## Authentication The CLI requires Mux API credentials to interact with your account. You can get your Access Token ID and Secret Key from the [Mux Dashboard](https://dashboard.mux.com/settings/access-tokens). ### Interactive login Run `mux login` to authenticate interactively: ```bash mux login ``` You'll be prompted to enter your Access Token ID and Secret Key. Credentials are stored securely in `~/.config/mux/config.json` with owner-only file permissions. ### Using environment variables The CLI can read credentials from a `.env` file or environment variables: ```bash MUX_TOKEN_ID=your-token-id MUX_TOKEN_SECRET=your-token-secret ``` Login from a `.env` file: ```bash mux login --env-file .env ``` ### Named environments For managing multiple Mux accounts (production, staging, development), you can configure named environments: ```bash mux login --name production mux login --name staging --env-file .env.staging ``` The first environment you add becomes the default. Switch between environments: ```bash mux env switch staging mux env list ``` Remove an environment: ```bash mux logout staging ``` ## Common options These options are available on most commands: | Option | Description | |--------|-------------| | `--json` | Output raw JSON instead of pretty-printed format. Useful for scripting and piping to `jq`. | | `--compact` | One-line-per-item output, grep-friendly. Available on `list` commands. | | `--limit ` | Number of results to return (default: 25). Available on `list` commands. | | `--page ` | Page number for pagination (default: 1). Available on `list` commands. | | `-f, --force` | Skip confirmation prompts on destructive actions. | | `--wait` | Poll until the resource is ready before returning. Available on `create` commands. | ## Webhook forwarding Listen for Mux webhook events in real-time and forward them to your local development server. Events are stored locally for replay during development. CLI webhook commands are for **local development only** and provide **no delivery guarantees**. In production, you must configure a webhook endpoint in the [Mux Dashboard](https://dashboard.mux.com) that points to your server's webhook URL. ### `mux webhooks listen` Connect to Mux's event stream and optionally forward events to a local URL. ```bash # Listen and print events mux webhooks listen # Forward to local dev server mux webhooks listen --forward-to http://localhost:3000/api/webhooks/mux ``` | Option | Description | |--------|-------------| | `--forward-to ` | POST received events to a local URL in real-time | | `--json` | Output raw JSON per event | When using `--forward-to`, the CLI displays a webhook signing secret and signs each forwarded request with a `mux-signature` header. Set `MUX_WEBHOOK_SECRET` in your app's environment to [verify these signatures](/docs/core/verify-webhook-signatures): ```typescript const event = mux.webhooks.unwrap(body, headers, process.env.MUX_WEBHOOK_SECRET); ``` The signing secret is unique per environment and persisted between sessions, so you only need to configure it once. ### `mux webhooks events list` List locally stored webhook events captured during `listen` sessions. The CLI stores the last 100 events. ```bash mux webhooks events list mux webhooks events list --limit 50 ``` ### `mux webhooks events replay [event-id]` Replay stored webhook events. Useful for re-testing your webhook handler without creating new resources. ```bash # Replay a specific event to your local server mux webhooks events replay abc123-event-id --forward-to http://localhost:3000/api/webhooks/mux # Replay all stored events mux webhooks events replay --all --forward-to http://localhost:3000/api/webhooks/mux # View event payload without forwarding mux webhooks events replay abc123-event-id ``` | Option | Description | |--------|-------------| | `--forward-to ` | POST event(s) to a local URL | | `--all` | Replay all stored events | | `--json` | Output JSON instead of pretty format | ### `mux webhooks trigger ` Send a synthetic webhook event to a local URL for testing. No API call is made — the payload is generated locally and signed with the per-environment signing secret. ```bash # Send an example video.asset.ready event mux webhooks trigger video.asset.ready --forward-to http://localhost:3000/api/webhooks/mux # Send a live stream event mux webhooks trigger video.live_stream.active --forward-to http://localhost:3000/api/webhooks/mux ``` | Option | Description | |--------|-------------| | `--forward-to ` | Local URL to POST the example event to (required) | | `--json` | Output JSON instead of pretty format | Run `mux webhooks trigger ` to see all supported event types. ## Commands ### Asset management Create, list, update, and delete video assets. ```bash # Create from URL mux assets create --url https://example.com/video.mp4 --playback-policy public # Upload local files (glob supported) mux assets create --upload ./videos/*.mp4 --playback-policy public # Create from JSON config file (for overlays, subtitles, multiple inputs) mux assets create --file asset-config.json # Wait for processing to complete mux assets create --url https://example.com/video.mp4 --playback-policy public --wait # List, get, update, delete mux assets list mux assets get mux assets update --title "My Video" --passthrough "my-custom-id" mux assets delete ``` The interactive asset manager opens a terminal UI (TUI) for browsing and managing your video library: ```bash mux assets manage ``` View all asset create options | Option | Description | |--------|-------------| | `--url ` | Video URL to ingest from the web | | `--upload ` | Local file(s) to upload (supports glob patterns like `*.mp4`) | | `--file, -f ` | JSON configuration file for complex asset creation | | `--playback-policy ` | `public` or `signed` (repeatable) | | `--test` | Create test asset (watermarked, 10s limit, deleted after 24h) | | `--passthrough ` | User metadata (max 255 characters) | | `--static-renditions ` | e.g. `1080p`, `720p`, `highest`, `audio-only` (repeatable) | | `--video-quality ` | `basic`, `plus`, or `premium` | | `--normalize-audio` | Normalize audio loudness level | | `-y, --yes` | Skip confirmation prompts | View all asset update options | Option | Description | |--------|-------------| | `--title ` | Set `meta.title` (max 512 characters) | | `--creator-id ` | Set `meta.creator_id` (max 128 characters) | | `--external-id ` | Set `meta.external_id` (max 128 characters) | | `--passthrough ` | Set `passthrough` (max 255 characters) | Asset sub-resources: playback IDs, static renditions, tracks #### Playback IDs Manage playback IDs on assets. Each asset can have multiple playback IDs with different policies. ```bash mux assets playback-ids list mux assets playback-ids create --policy signed mux assets playback-ids delete ``` #### Static renditions Static renditions are downloadable MP4 versions of your video assets at specific resolutions. ```bash mux assets static-renditions list mux assets static-renditions create --resolution 1080p --wait mux assets static-renditions delete ``` Resolution options: `highest`, `audio-only`, `2160p`, `1440p`, `1080p`, `720p`, `540p`, `480p`, `360p`, `270p` #### Tracks Add text and audio tracks (subtitles, captions, audio) to video assets. ```bash # Add a subtitle track mux assets tracks create \ --url https://example.com/subs.vtt \ --type text \ --language-code en \ --text-type subtitles # Generate subtitles from an audio track mux assets tracks generate-subtitles \ --language-code en \ --name "English (auto)" # Delete a track mux assets tracks delete ``` #### Other asset commands ```bash mux assets input-info # view input file details mux assets update-master-access --master-access temporary # enable master access ``` ### Live stream management Create and manage live streams for broadcasting via RTMP. ```bash # Create a live stream mux live create --playback-policy public # Create with options mux live create \ --playback-policy public \ --latency-mode low \ --reconnect-window 60 # List, get, delete mux live list mux live get mux live delete # Stream lifecycle mux live complete mux live enable mux live disable # Reset stream key mux live reset-stream-key ``` Once created, stream using: * **RTMP URL:** `rtmp://global-live.mux.com/app` * **Stream Key:** returned in the response View all live stream create options | Option | Description | |--------|-------------| | `--playback-policy ` | `public` or `signed` (repeatable) | | `--new-asset-settings ` | Auto-create asset from stream. Use `none` to disable, or JSON string | | `--reconnect-window ` | Reconnect timeout (default: 60) | | `--latency-mode ` | `low`, `reduced`, or `standard` (default: `low`) | | `--test` | Create test stream (deleted after 24h) | View all live stream update options | Option | Description | |--------|-------------| | `--latency-mode ` | `low`, `reduced`, or `standard` | | `--reconnect-window ` | Reconnect window (0-1800) | | `--max-continuous-duration ` | Max continuous duration (60-43200) | | `--passthrough ` | Passthrough metadata (max 255 characters) | | `--reconnect-slate-url ` | Image to display during reconnect | | `--use-slate-for-standard-latency` | Display slate for standard latency streams | | `--title ` | Title for the live stream | Live stream sub-resources: simulcast targets, subtitles, playback IDs #### Simulcast targets Restream a live stream to third-party platforms (e.g., YouTube, Twitch). ```bash mux live simulcast-targets create --url rtmp://live.twitch.tv/app --stream-key live_xxxxx mux live simulcast-targets get mux live simulcast-targets delete ``` #### Embedded subtitles (CEA-608) ```bash mux live update-embedded-subtitles \ --language-channel cc1 \ --language-code en \ --name "English CC" ``` #### Generated subtitles (ASR) ```bash mux live update-generated-subtitles \ --language-code en \ --name "English (auto)" ``` Use `--clear` on either command to remove subtitle settings. #### New asset static renditions Configure static renditions for assets automatically created from a live stream. ```bash mux live update-new-asset-static-renditions --resolution 1080p --resolution 720p mux live delete-new-asset-static-renditions ``` #### Playback IDs ```bash mux live playback-ids list mux live playback-ids create --policy signed mux live playback-ids delete ``` ### Direct uploads Create direct upload URLs for client-side video uploading. ```bash mux uploads create --cors-origin "https://example.com" --playback-policy public mux uploads list mux uploads get mux uploads cancel ``` | Option | Description | |--------|-------------| | `--cors-origin ` | Allowed CORS origin for the upload (required) | | `-p, --playback-policy ` | `public` or `signed` | | `--timeout ` | Seconds before the upload times out (default: 3600) | | `--test` | Create a test upload (asset deleted after 24 hours) | ### Signing keys and secure playback For assets with signed playback policies, the CLI can generate secure URLs. #### Create a signing key ```bash mux signing-keys create ``` The private key is only returned once during creation. The CLI automatically stores it in your current environment configuration. ```bash mux signing-keys list mux signing-keys get mux signing-keys delete ``` #### Generate signed URLs ```bash # Sign for video playback mux sign # Sign with custom expiration mux sign --expiration 24h # Sign a thumbnail with parameters mux sign --type thumbnail --param time=14 --param width=100 # Sign a GIF mux sign --type gif # Output token only (no URL) mux sign --token-only # Pass JWT claims as JSON mux sign --params-json '{"custom": {"session_id": "xxxx-123"}}' ``` | Option | Description | |--------|-------------| | `-e, --expiration ` | Token expiration (default: `7d`). Examples: `7d`, `24h`, `30m` | | `-t, --type ` | `video` (default), `thumbnail`, `gif`, `storyboard` | | `-p, --param ` | JWT claim as key=value (repeatable) | | `--params-json ` | JWT claims as JSON object | | `--token-only` | Output only the JWT token | View thumbnail parameters These parameters can be passed via `--param` when using `--type thumbnail`: | Parameter | Description | |-----------|-------------| | `time` | Video timestamp in seconds | | `width` | Width in pixels | | `height` | Height in pixels | | `rotate` | Clockwise rotation: 90, 180, or 270 | | `fit_mode` | `preserve`, `stretch`, `crop`, `smartcrop`, `pad` | | `flip_v` | Flip vertically | | `flip_h` | Flip horizontally | ### Playback ID lookup Look up which asset or live stream a playback ID belongs to: ```bash mux playback-ids mux playback-ids --expand # fetch the full asset or live stream object ``` ### Playback restrictions Control where and how your content can be played. ```bash # Create a restriction mux playback-restrictions create \ --allowed-domains "example.com" \ --allowed-domains "*.example.com" # List, get, delete mux playback-restrictions list mux playback-restrictions get mux playback-restrictions delete # Update referrer rules mux playback-restrictions update-referrer \ --allowed-domains "example.com" \ --allow-no-referrer # Update user agent rules mux playback-restrictions update-user-agent \ --allow-no-user-agent true \ --allow-high-risk-user-agent false ``` ### Transcription vocabularies Manage custom vocabularies to improve automatic speech recognition accuracy for domain-specific terms. ```bash # Create a vocabulary mux transcription-vocabularies create \ --phrase "Mux" --phrase "HLS" --phrase "RTMP" \ --name "Streaming Terms" # List, get, update, delete mux transcription-vocabularies list mux transcription-vocabularies get mux transcription-vocabularies update --phrase "Mux" --phrase "DASH" mux transcription-vocabularies delete ``` ### Delivery usage List delivery usage reports for video assets and live streams. ```bash mux delivery-usage list mux delivery-usage list --asset-id mux delivery-usage list --live-stream-id ``` ### DRM configurations View DRM configurations for your Mux environment. DRM configurations are provisioned by Mux and are read-only. ```bash mux drm-configurations list mux drm-configurations get ``` ### Mux Data Commands for video analytics, monitoring, and incident tracking via the Mux Data API. #### Video views ```bash mux video-views list mux video-views list --filters "country:US" --timeframe "24:hours" mux video-views list --viewer-id mux video-views get ``` #### Metrics ```bash # List available metrics mux metrics list # Breakdown by dimension mux metrics breakdown --group-by country --measurement median # Overall metric values mux metrics overall --measurement avg # Timeseries data mux metrics timeseries --group-by hour # Performance insights mux metrics insights --measurement 95th ``` Common options for metric commands: `--measurement <95th|median|avg|count|sum>`, `--filters`, `--metric-filters`, `--timeframe` #### Monitoring Real-time monitoring data from Mux Data. ```bash mux monitoring dimensions mux monitoring metrics mux monitoring breakdown --dimension mux monitoring breakdown-timeseries --dimension mux monitoring histogram-timeseries --filters ... mux monitoring timeseries ``` #### Incidents ```bash mux incidents list mux incidents list --status open --severity alert mux incidents get mux incidents related ``` #### Annotations Mark significant events (deployments, config changes) on your analytics timeline. ```bash mux annotations create --date 1700000000 --note "Deployed v2.1.0" mux annotations list mux annotations get mux annotations update --date --note mux annotations delete ``` #### Dimensions, errors, and exports ```bash # List available dimensions and their values mux dimensions list mux dimensions values --timeframe "24:hours" # List errors mux errors list --filters ... --timeframe ... # List video view export files mux exports list ``` ## Getting help View available commands: ```bash mux --help ``` Get help for a specific command: ```bash mux assets --help mux assets create --help ``` ## Full documentation For more information, see the [Mux CLI repository](https://github.com/muxinc/cli) on GitHub. # Add high-performance video to your Node application Use our API and components to handle embedding, storing, and streaming video in your Node application ## Installation Add a dependency on the `@mux/mux-node` package via npm or yarn. ```bash npm install @mux/mux-node ``` ## Quickstart To start, you'll need a Mux access token. Once you've got that, you're off to the races! ```javascript import Mux from '@mux/mux-node'; const mux = new Mux({ tokenId: process.env.MUX_TOKEN_ID, tokenSecret: process.env.MUX_TOKEN_SECRET }); const asset = await mux.video.assets.create({ input: [{ url: 'https://storage.googleapis.com/muxdemofiles/mux-video-intro.mp4' }], playback_policy: ['public'], }); ``` ## Full documentation Check out the [Mux Node SDK docs](https://github.com/muxinc/mux-node-sdk) for more information. # Add high-performance video to your Python application Use our API and components to handle embedding, storing, and streaming video in your Python application ## Installation Install this module using either `pip` or by installing from source. ```curl # Via pip pip install git+https://github.com/muxinc/mux-python.git # Via source git checkout https://github.com/muxinc/mux-python.git cd mux-python python setup.py install --user ``` ## Quickstart To start, you'll need a Mux access token. Once you've got that, you're off to the races! ```python import os import mux_python from mux_python.rest import ApiException # Authentication Setup configuration = mux_python.Configuration() configuration.username = os.environ['MUX_TOKEN_ID'] configuration.password = os.environ['MUX_TOKEN_SECRET'] # API Client Initialization assets_api = mux_python.AssetsApi(mux_python.ApiClient(configuration)) # List Assets print("Listing Assets: \n") try: list_assets_response = assets_api.list_assets() for asset in list_assets_response.data: print('Asset ID: ' + asset.id) print('Status: ' + asset.status) print('Duration: ' + str(asset.duration) + "\n") except ApiException as e: print("Exception when calling AssetsApi->list_assets: %s\n" % e) ``` ## Full documentation Check out the [Mux Python SDK docs](https://github.com/muxinc/mux-python) for more information. # Add high-performance video to your PHP application Use our API and components to handle embedding, storing, and streaming video in your PHP application ## Installation We publish Mux PHP to Packagist. You should depend on Mux PHP by adding us to your `composer.json` file. ```php composer require mux/mux-php ``` ## Quickstart To start, you'll need a Mux access token. Once you've got that, you're off to the races! ```php // Authentication Setup $config = MuxPhp\Configuration::getDefaultConfiguration() ->setUsername(getenv('MUX_TOKEN_ID')) ->setPassword(getenv('MUX_TOKEN_SECRET')); // API Client Initialization $assetsApi = new MuxPhp\Api\AssetsApi( new GuzzleHttp\Client(), $config ); // Create Asset Request $input = new MuxPhp\Models\InputSettings(["url" => "https://storage.googleapis.com/muxdemofiles/mux-video-intro.mp4"]); $createAssetRequest = new MuxPhp\Models\CreateAssetRequest(["input" => $input, "playback_policy" => [MuxPhp\Models\PlaybackPolicy::PUBLIC_PLAYBACK_POLICY] ]); // Ingest $result = $assetsApi->createAsset($createAssetRequest); // Print URL print "Playback URL: https://stream.mux.com/" . $result->getData()->getPlaybackIds()[0]->getId() . ".m3u8\n" ``` ## Full documentation Check out the [Mux PHP SDK docs](https://github.com/muxinc/mux-php) for more information. # Add high-performance video to your Ruby application Use our API and components to handle embedding, storing, and streaming video in your Ruby application ## Installation Add `mux_ruby` to your project's `Gemfile`. ```ruby gem 'mux_ruby' ``` ## Quickstart To start, you'll need a Mux access token. Once you've got that, you're off to the races! ```ruby require 'mux_ruby' # Auth Setup openapi = MuxRuby.configure do |config| config.username = ENV['MUX_TOKEN_ID'] config.password = ENV['MUX_TOKEN_SECRET'] end # API Client Init assets_api = MuxRuby::AssetsApi.new # List Assets puts "Listing Assets in account:\n\n" assets = assets_api.list_assets() assets.data.each do | asset | puts "Asset ID: #{asset.id}" puts "Status: #{asset.status}" puts "Duration: #{asset.duration.to_s}\n\n" end ``` ## Full documentation Check out the [Mux Ruby SDK docs](https://github.com/muxinc/mux-ruby) for more information. # Add high-performance video to your Elixir application Use our API and components to handle embedding, storing, and streaming video in your Elixir application ## Installation Add `mux` to your list of dependencies in `mix.exs`. ```elixir def deps do [ {:mux, "~> 3.2.1"} ] end ``` ## Quickstart To start, we'll need a Mux access token. We'll put our access token in our application configuration. ```elixir # config/dev.exs config :mux, access_token_id: "abcd1234", access_token_secret: "efghijkl" ``` Then use this config to initialize a new client in your application. ```elixir client = Mux.client() ``` You can also pass the access token ID and secret directly to client/2 function if you'd prefer: ```elixir client = Mux.client("access_token_id", "access_token_secret") ``` Now we can use the client to upload new videos, manage playback IDs, etc. ```elixir params = %{ input: "https://example.com/video.mp4" } {:ok, asset, _} = Mux.Video.Assets.create(client, params); ``` ## Full documentation Check out the [Mux Elixir SDK docs](https://github.com/muxinc/mux-elixir) for more information. # Add high-performance video to your Java application Use our API and components to handle embedding, storing, and streaming video in your Java application ## Installation There are several ways to add the Mux Java SDK to your project: ### Maven Add this dependency to your project's POM: ```xml com.mux mux-sdk-java 1.0.0 compile ``` ### Gradle Add this dependency to your project's build file: ```gradle compile "com.mux:mux-sdk-java:1.0.0" ``` ## Quickstart To start, you'll need a Mux access token. Once you've got that, you're off to the races! ```java // Import classes: import com.mux.ApiClient; import com.mux.ApiException; import com.mux.Configuration; import com.mux.auth.*; import com.mux.models.*; import com.mux.sdk.AssetsApi; public class Example { public static void main(String[] args) { ApiClient defaultClient = Configuration.getDefaultApiClient(); defaultClient.setBasePath("https://api.mux.com"); // Configure HTTP basic authorization: accessToken HttpBasicAuth accessToken = (HttpBasicAuth) defaultClient.getAuthentication("accessToken"); accessToken.setUsername("YOUR USERNAME"); accessToken.setPassword("YOUR PASSWORD"); AssetsApi apiInstance = new AssetsApi(defaultClient); CreateAssetRequest createAssetRequest = {"input":[{"url":"https://muxed.s3.amazonaws.com/leds.mp4"}],"playback_policy":["public"],"video_quality":"basic"}; // CreateAssetRequest | try { AssetResponse result = apiInstance.createAsset(createAssetRequest) .execute(); System.out.println(result); } catch (ApiException e) { System.err.println("Exception when calling AssetsApi#createAsset"); System.err.println("Status code: " + e.getCode()); System.err.println("Reason: " + e.getResponseBody()); System.err.println("Response headers: " + e.getResponseHeaders()); e.printStackTrace(); } } } ``` ## Full documentation Check out the [Mux Java SDK docs](https://github.com/muxinc/mux-java) for more information. # Add high-performance video to your C# application Use our API and components to handle embedding, storing, and streaming video in your C# application ## Frameworks supported * .NET Core >=1.0 * .NET Framework >=4.6 * Mono/Xamarin >=vNext ## Dependencies * [RestSharp](https://www.nuget.org/packages/RestSharp) - 106.11.4 or later * [Json.NET](https://www.nuget.org/packages/Newtonsoft.Json/) - 12.0.3 or later * [JsonSubTypes](https://www.nuget.org/packages/JsonSubTypes/) - 1.7.0 or later * [System.ComponentModel.Annotations](https://www.nuget.org/packages/System.ComponentModel.Annotations) - 4.7.0 or later The DLLs included in the package may not be the latest version. We recommend using [NuGet](https://docs.nuget.org/consume/installing-nuget) to obtain the latest version of the packages: ``` Install-Package RestSharp Install-Package Newtonsoft.Json Install-Package JsonSubTypes Install-Package System.ComponentModel.Annotations ``` NOTE: RestSharp versions greater than 105.1.0 have a bug which causes file uploads to fail. See [RestSharp#742](https://github.com/restsharp/RestSharp/issues/742) ## Installation Generate the DLL using your preferred tool (e.g. `dotnet build`) Then include the DLL (under the `bin` folder) in the C# project, and use the namespaces: ```csharp using Mux.Csharp.Sdk.Api; using Mux.Csharp.Sdk.Client; using Mux.Csharp.Sdk.Model; ``` ## Usage At this moment, this SDK is not suitable for parsing or modeling webhook payloads, due to some incompatibilities in our API spec and our SDK generation tooling. We are working on resolving these issues, but for now you should only use this SDK for Mux's REST APIs. To use the API client with a HTTP proxy, setup a `System.Net.WebProxy` ```csharp Configuration c = new Configuration(); System.Net.WebProxy webProxy = new System.Net.WebProxy("http://myProxyUrl:80/"); webProxy.Credentials = System.Net.CredentialCache.DefaultCredentials; c.Proxy = webProxy; ``` ## Getting Started ```csharp using System.Collections.Generic; using System.Diagnostics; using Mux.Csharp.Sdk.Api; using Mux.Csharp.Sdk.Client; using Mux.Csharp.Sdk.Model; namespace Example { public class Example { public static void Main() { Configuration config = new Configuration(); config.BasePath = "https://api.mux.com"; // Configure HTTP basic authorization: accessToken config.Username = "YOUR_USERNAME"; config.Password = "YOUR_PASSWORD"; var apiInstance = new AssetsApi(config); var createAssetRequest = new CreateAssetRequest(); // CreateAssetRequest | try { // Create an asset AssetResponse result = apiInstance.CreateAsset(createAssetRequest); Debug.WriteLine(result); } catch (ApiException e) { Debug.Print("Exception when calling AssetsApi.CreateAsset: " + e.Message ); Debug.Print("Status Code: "+ e.ErrorCode); Debug.Print(e.StackTrace); } } } } ``` ## Full documentation Check out the [Mux C# SDK docs](https://github.com/muxinc/mux-csharp) for more information. # Integrate with your CMS Mux has a growing collection of CMS integrations that make it easy to incorporate your Mux video details into your application. While Mux stores basic video metadata like titles and creator IDs, a content management system (CMS) can help you manage additional content around your videos - like descriptions, categories, related content, and other rich metadata that helps organize your video content within your application's broader content strategy. Mux integrates with the following CMS applications to help you easily manage and deliver video content in your applications. These integrations allow you to easily incorporate Mux videos into your existing CMS workflow. ## Headless CMS integrations * [Sanity](/docs/integrations/sanity) * [Contentful](/docs/integrations/contentful) * [WordPress](/docs/integrations/wordpress) * [Strapi](/docs/integrations/strapi) * [Cosmic](/docs/integrations/cosmic) * [DatoCMS](/docs/integrations/datocms) * [Prepr](/docs/integrations/prepr) ## Third-party integrations These are integrations that are not officially supported by Mux, but are community-driven and maintained. * [PayloadCMS](https://github.com/oversightstudio/payload-plugins/tree/main/packages/mux-video) * [Statamic](https://github.com/daun/statamic-mux) If there’s an integration you’d like to see or if you’d like to partner with us, [let us know](mailto:info@mux.com)! # Integrate with Sanity Learn how to integrate Mux video with your Sanity studio. If your team is using Sanity as a CMS this integration will allow them to upload videos to Mux without leaving the Sanity studio. This guide assumes you already have a Sanity Studio set up. If you haven't created your Sanity Studio yet, follow the [Sanity Studio quickstart guide](https://www.sanity.io/docs/sanity-studio-quickstart/setting-up-your-studio) to get started. ## 1. Install Mux plugin Run this command in your Sanity project folder: ```sh npm i sanity-plugin-mux-input ``` ## 2. Use in a schema To use Mux video in your Sanity schemas, you'll need to create a schema type, import it to your schema types index, and configure the Mux plugin in your Sanity configuration file. ### 2.1. Create a schema type Create a new file in your `schemaTypes` directory (or `schemas` directory, depending on your setup). For example, create a file called `videoBlogPost.ts`: ```typescript // schemaTypes/videoBlogPost.ts import { defineType, defineField } from 'sanity' export default defineType({ title: 'Video blog post', name: 'videoBlogPost', type: 'document', fields: [ defineField({ name: 'title', type: 'string', title: 'Title' }), defineField({ name: 'video', type: 'mux.video', title: 'Video file' }) ] }) ``` ### 2.2. Import the schema type Import your new schema type in your schema types index file (usually `schemaTypes/index.ts` or `schemas/index.ts`): ```typescript // schemaTypes/index.ts import videoBlogPost from './videoBlogPost' export const schemaTypes = [videoBlogPost] ``` ### 2.3. Configure the Mux plugin Add the Mux plugin to your Sanity configuration file (`sanity.config.ts` or `sanity.config.js`): ```typescript // sanity.config.ts import { defineConfig } from 'sanity' import { structureTool } from 'sanity/structure' import { muxInput } from 'sanity-plugin-mux-input' import { schemaTypes } from './schemaTypes' export default defineConfig({ name: 'default', title: 'My Sanity Project', projectId: 'your-project-id', dataset: 'production', plugins: [ structureTool(), muxInput() ], schema: { types: schemaTypes, }, }) ``` ## 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). If you want to use signed or DRM playback, you need to enable both **Read** and **Write** permissions for the `System` section. For more information, check out the [Signed Tokens](/docs/integrations/sanity#signed-tokens) section. Mux Video and Mux Data access token permissions Back in Sanity Studio, navigate to the **Videos** section in your studio menu, then click on **Configure plugin**. Enter your Access Token ID and Secret Key in the configuration settings. You'll also see an option to **Enable signed URLs**. This feature allows you to create videos with signed playback policies for additional security. If you're unsure, you can leave this disabled for now—you can learn more about this feature in the [Signed Tokens](#signed-tokens) section below. Additionally, you will see an input to add an optional **DRM Configuration ID**. This feature allows you to create videos with an extra layer of security using DRM. You can learn more about this feature in the [DRM](#digital-rights-management-drm) section below. ## 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. You now have the ability to upload content to Mux through Sanity CMS! To retrieve your video for playback, check out the [Sanity docs](https://www.sanity.io/blog/first-class-responsive-video-support-with-the-new-mux-plugin) for instructions. ## 5. Explore advanced options ## Signed Tokens Enabling signed URLs in Sanity will require you to generate your own signing tokens on your application **server**. This involves creating a signing key and using that to generate JSON web tokens when you want to access your videos and thumbnails outside of Sanity. 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. ```json { "_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](/docs/guides/secure-video-playback) Note that in the Sanity UI when an asset is using a signed URL you will see this green notice. ## Digital Rights Management (DRM) **Note:** Enabling DRM in Sanity will require you to generate your own signing tokens on your application **server**. This involves creating a signing key and using that to generate JSON web tokens when you want to access your videos and thumbnails outside of Sanity. ### Prerequisites Before you can use DRM playback policies, you'll need: * An access token with Read and Write permissions for the System section. See how to do this in [step 3](#3-enter-mux-credentials). * DRM support enabled in your Mux account and the respective DRM Configuration ID. You can see the steps to enable DRM for your account in our [DRM guide](/docs/guides/protect-videos-with-drm). To enable DRM on Sanity, simply add your DRM Configuration ID on the configuration popover. If you want to preview DRM-protected content in Sanity, make sure you also enable Signed URLs. ### Uploading DRM-protected assets Once DRM is enabled on Sanity, to upload a new asset with DRM protection: * Set Video Quality to Plus or Premium * Look for the DRM option in the Playback Policy section * Enable the DRM checkbox to upload your asset with DRM protection If you don't see the DRM option or it appears disabled, make sure that you're on the latest version of the plugin and you've added your DRM Configuration ID in the plugin settings. ### Multiple playback policies You can select multiple playback policies for a single asset: * Public: Anyone with the playback URL can view the video * Signed: Requires a signed JWT token to view the video * DRM: Protected content that prevents screen recording and screenshots Combining policies gives you flexibility in how you distribute your content. However, note that when multiple policies are enabled, each playback ID maintains its own protection level. For example, a Public playback ID will remain accessible without protection even if DRM is also enabled. When viewing an asset's details, the panel displays all selected playback policies for that asset and the corresponding playback ID for each policy. ### Viewing DRM-protected videos #### Videos tab In the Videos tab, assets with DRM protection are indicated with a special DRM icon. * Thumbnails will still be visible (they are not DRM-protected) * The Sanity video player will automatically use the most appropriate playback policy while displaying the icon for the asset's strongest policy: 1. Public playback is prioritized (no additional cost) 2. Signed playback is used if public isn't available 3. DRM playback is used only when necessary (as it incurs a small cost per playback) This approach helps minimize playback costs while still indicating the protection level of your assets. ### Advanced configuration #### Default value for DRM policy DRM policy is disabled by default. You can use `publicDrm: true` to enable DRM policy for all new assets. ```js muxInput({ // ... other Mux plugin config defaultDrm: true }) ``` Note that this will only apply when a DRM Configuration ID is present. #### Disable DRM playback warning The first time you play DRM-protected content, you'll see a warning message explaining the behavior of DRM playback. This message is shown only once and tracked using local storage with the key `mux-plugin-has-shown-drm-playback-warning`. To disable this warning entirely, you can add `disableDrmPlaybackWarning: true` to the plugin configuration: ```js muxInput({ // ... other Mux plugin config disableDrmPlaybackWarning: true }) ``` ### Troubleshooting #### DRM checkbox is disabled If the DRM playback policy option appears disabled, verify that you've added a DRM Configuration ID in the plugin settings. #### Invalid DRM Configuration ID The plugin doesn't validate your DRM Configuration ID in advance. If you enter an invalid ID, you may encounter errors when attempting to upload DRM-protected assets. Make sure you're using the correct ID from your Mux dashboard and that your access token was created with Read and Write System permissions. #### My DRM Configuration ID is set, but I cannot play back DRM-protected content. DRM playback uses a playback token just like Signed Playback. Make sure that `"Enable Signed URLs"` is checked in the Plugin configuration popover. ## Video quality **Note:** We recently renamed encoding tiers to video quality levels. [Read the blog](https://www.mux.com/blog/no-one-said-naming-was-easy-encoding-tiers-are-now-video-quality-levels) for more details. When uploading a new video, you can select which Video Quality is used when preparing the Asset. Possible selections are `Premium`, `Plus` and `Basic`. When choosing `Premium` or `Plus`, additional options are made available for maximum resolutions (1080p, 2K or 4K). More details can be found in our [Use Video Quality](/docs/guides/use-video-quality-levels) guide. ## Static Renditions When using the `Plus` Video Quality, an option to enable downloadable MP4s will be available. This option will create [Static Renditions](/docs/guides/enable-static-mp4-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](/docs/guides/stream-videos-in-4k). Also, read more on this feature announcement in our [blog post](https://www.mux.com/blog/more-pixels-fewer-problems-introducing-4k-support-for-mux-video). ## Watermarks You can add a watermark image overlay to videos uploaded through Sanity. When uploading a new video, the plugin provides a watermark configuration section where you can specify a watermark image URL (PNG or JPG) and customize its appearance. The watermark settings include: * **Image URL**: A URL pointing to a PNG or JPG image to use as the watermark * **Size**: Control the dimensions of the watermark on the video * **Opacity**: Adjust the transparency of the watermark * **Position**: Place the watermark using either a visual canvas-based drag interface or by manually editing the position values **Note:** Watermark settings only apply to video uploads. The watermark configuration UI will not appear for audio-only files. For more details on watermark positioning options (percent vs. pixel values, centering, and multiple watermarks), see the [Add watermarks to your videos](/docs/guides/add-watermarks-to-your-videos) guide. ## Captions and Subtitles You can add captions to your videos in two ways: during the initial upload or after the video has been uploaded. Both auto-generated and custom captions are supported, and you can use both types on the same asset. ### Adding captions during upload When uploading a new video, you can configure auto-generated captions in the upload modal before the file is uploaded to Mux. This allows you to set up auto-generated captions right from the start. ### Adding captions to existing videos For videos that have already been uploaded, you can add or manage captions in two ways: * **From the Videos section:** Go to **Videos** in your studio menu, find the video in the list, and open it to view its details and caption options. * **From the document:** Open the document that contains the video field, click the three-dots menu on the video input, then select **Captions**. ### Types of captions #### Auto-generated captions For auto-generated captions, select the language of the spoken audio in the video. Mux will generate the captions automatically while it prepares the asset. The display name you choose is what will appear in the player when users select the caption track. The auto-generated option should only be used to generate one caption track per asset. The language selected must match the spoken language in the video. More details: [Add auto-generated captions and use transcripts](/docs/guides/add-autogenerated-captions-and-use-transcripts). #### Custom captions You can add custom captions and subtitles by providing a public URL to a `.vtt` or `.srt` file. Enter the URL in the caption configuration and set the caption name and language. You can host the file in Sanity's Media Library or any other public URL. More details: [Add subtitles/captions to videos](/docs/guides/add-subtitles-to-your-videos). ### Managing captions Caption tracks can be added and removed at any time. Changes are reflected in the stored asset data. If you need to edit auto-generated captions, you can download the VTT file, make your edits, and re-upload it as a custom caption. # Integrate with Contentful The Mux Contentful app connects Contentful with your Mux account so that Mux can handle uploading and streaming of all videos. This is a detailed guide for integrating the Contentful Mux app. To read more about the Mux app and why you may want to use it to power videos in your CMS, read [the announcement blog post on Contentful's blog](https://www.contentful.com/blog/improve-video-streaming-using-hls-with-mux-contentful/). ## 1. Enter Mux credentials Create an access token in your Mux account - you will need both the access token ID and the access token secret in the Contentful application. The access token should have **Read** and **Write** permissions for Mux Video, and also **Read** for Mux Data. Mux Video access token permissions ## 2. Install App In the Contentful dashboard click “Apps > Manage Apps” in the top navigation bar. Scroll down and find the Mux app, click it to start the installation flow. Next you will see the configuration screen. You can come back to this screen after the app is installed to update the app configuration. Enter your Mux access token and Mux token secret. These are the same credentials you would use to make API requests yourself. Assign Mux to JSON fields from your content model. In this example I am assigning Mux to take over the “Video Upload” field in my Blog post model. If you add new JSON fields later you can always come back to this configuration screen and assign Mux to the new fields. Add API keys to integration. You can also assign Mux fields from the configuration of a particular Content model if you create a JSON Object type field and then edit its appearance as follows: Edit field appearance to add Mux. ### 2.1. Assign Mux Sidebar to a Content model Once the plugin is installed and your Content Models are configured, you can add the Mux sidebar by clicking the plus sign and placing it wherever you want. Then click save. This sidebar is used to visualize pending changes with the publication of the Entry in Contentful. This is explained in more detail in the [Features and Important Notes](#7-mux-sidebar) section. Add Mux sidebar to a Content model. ## 3. Upload video Create a new entry for your content model. You should see a drag and drop zone and file picker to select an audio or video file: Empty Video field Select a video file and a modal will appear with expandable configuration options that you can click to expand and configure the video before it's uploaded. The configuration options available are: * **Video Quality Settings:** Allows you to define the video quality. More information: [Use different video quality levels](/docs/guides/use-video-quality-levels) * **Privacy Settings:** Allows you to define the video visibility between public or protected. More information: [Secure video playback](/docs/guides/secure-video-playback) * **Metadata:** Allows you to add the title in the video metadata. This is also useful for having the title defined in the Mux Dashboard. More information: [Add metadata to your videos](/docs/guides/add-metadata-to-your-videos) * **Captions:** Allows you to add captions to your videos, both custom and auto-generated captions. * To generate auto-generated captions, you need to specify the video language and it will automatically generate captions. * For custom captions, you need to specify the URL where the captions are located and the caption language. More information in [Captions and Subtitles](#5-captions-and-subtitles) section. * **MP4 Generation:** Allows you to generate static renditions for your videos, both audio-only and audio with video. More information: [Enable static MP4 renditions](/docs/guides/enable-static-mp4-renditions) After configuring these options, click on the upload button and wait for the file to upload to Mux. The amount of time this takes will depend on your network upload speed and the size of the file. **Don't close the tab until the upload is complete.** Additionally, entering a Mux Asset ID from an existing video in Mux, or a URL to an audio or video file will also work in the input field. Empty Video field Uploading video. After the upload is complete you will see a message that says "Waiting for asset to be playable" while Mux is processing your video. For normal video files it should only take a minute or so, however longer files, or files that need more processing, may take longer. Waiting for video to process. Your video is now playable via Mux. You will see a player with your video in the Contentful UI. After a video is finished and ready to play. ## 4. Playback When you query your Mux video through the Contentful API you will get back a JSON object that looks something like this that is viewable in the Data tab: ```json { "version": 3, "uploadId": "some-upload-id", "assetId": "some-asset-id", "playbackId": "YOUR_PLAYBACK_ID", "ready": true, "ratio": "16:9", "max_stored_resolution": "HD", "max_stored_frame_rate": 29.928, "duration": 23.857167, "audioOnly": false, "created_at": 1664219467, "audioTracks": [ { "type": "audio", "primary": true, "max_channels": 2, "max_channel_layout": "stereo", "id": "some-audio-track-id", "duration": 10.026667 } ], "meta": { "title": "some-video-title", "external_id": "some-external-id" } } ``` You will need to pull out the `playbackId` property and construct a URL like this. You will use this URL with a player that supports HLS: ```text https://stream.mux.com/{YOUR_PLAYBACK_ID}.m3u8 ``` View Mux's [Playback docs](/docs/guides/play-your-videos) for more information about players. ## Using Mux Player We made it easy to playback video using Mux Player by including the same code used to play the video in the Contentful dashboard. Simply head to the **Player Code** tab, click the copy button, and paste this into a website for quicker testing and development. You can also add optional parameters to the example code such as autoplay, mute, and loop by clicking the corresponding checkboxes. This will update the example code for you to use. Additionally, there's an option to get iframe example code for embedding the video, providing an alternative integration method. Get the Mux Player code. ## 5. Captions and Subtitles Captions can be added before uploading an asset (see the [Upload video](#3-upload-video) section) and after uploading in the Captions tab. There are two ways to add captions: auto-generated and custom captions, and they can be used together if desired. You must select the type of captions to upload from the dropdown menu. Select caption type from dropdown ### Auto-Generated Captions For auto-generated captions, you need to select the Language Code. This is automatically populated based on the Audio Name you select. It's important to select the same language as the spoken audio in the video so that captions are generated correctly. The Audio Name is what will appear in the player when selecting the caption. You can use any name you want. Auto-generated captions configuration ### Custom Captions Custom captions and subtitles can come from any publicly available URL. Add the URL to the `vtt` or `srt` caption file, selecting the caption name and to mark as closed captions. Adding custom captions/subtitles One way to upload captions is to use the Contentful Media Manager. After uploading the file to the Manager, right click on the download button and select `copy link` then paste this link into the URL field. Copying the file URL in Media Manager. ### Managing Captions Caption files can be added or deleted, and files can be downloaded for further editing. The stored JSON object will also reflect additional caption files. Existing captions will be displayed after clicking the `Resync` button under the Data tab or when entering to the entry. Deleting a caption will appear in the Mux sidebar and require publishing to take effect in Mux. Captions or subtitles are working on video. ## 6. Audio Tracks You can add new audio tracks to an existing asset in the Audio Tracks section. This is useful for providing multiple language audio tracks or alternative audio content for your videos. Audio Tracks tab ### Adding Audio Tracks To upload a new audio track, you need to provide a public URL of an audio file. One way to obtain this is by using the Contentful Media Manager, in the same way as described in the [Captions section](#custom-captions). You need to specify the Language Code, which is automatically populated when you indicate the Audio Name. The Audio Name can contain any text and is what will be displayed in the player when users want to select from the available audio tracks. Adding new audio track ### Managing Audio Tracks Audio tracks can be added or deleted, and the stored JSON object will reflect the additional audio tracks. Deleting an audio track will appear in the Mux sidebar and require publishing to take effect in Mux. Audio tracks in player ## 7. Mux Sidebar The Mux sidebar provides a visual interface to track the synchronization status between your Contentful entries and Mux assets. This sidebar displays: * Pending actions that need to be synchronized with Mux * Any changes that require publishing to take effect in Mux Mux sidebar. Mux sidebar. ## 8. Publishing Requirements and Breaking Changes As part of the [version 2.0 plugin release](https://github.com/contentful/apps/pull/9826), changes were made to maintain data integrity and consistency between what is published in Contentful and what is stored in Mux. For example, to change a video from public to protected, its playback ID must be regenerated, and if that video is published in Contentful, the new playback ID couldn't be obtained previously. To solve this, some actions that we consider "breaking changes" will not be executed in Mux until the user clicks "Publish" on the pending changes. ### Breaking Changes That Require Publishing The following changes will appear as pending in the Mux sidebar and will only be applied to Mux when you click "Publish changes" in Contentful: * **Delete Video** - Removing a video asset * **Delete Captions** - Removing caption/subtitle files * **Delete Audio** - Removing audio tracks * **Change Metadata Title** - Modifying the title in the metadata section * **Delete MP4 Renditions** - Removing static MP4 files * **Change Video Visibility** - Switching between public/protected settings Mux sidebar showing pending changes ### Publishing Workflow For example, if you want to change the visibility of an existing video, this will be a pending change that appears in the sidebar and the change will be made in Mux when you click "Publish changes" in Contentful. Publishing changes process The same happens with actions like deletions - if you want to delete a caption, it will appear marked for deletion but will only be removed when you publish. You can also undo deletions to prevent them from being deleted when you publish. ## Explore advanced options ## Advanced: Signed URLs Enabling signed URLs in Contentful will require you to generate your own signing tokens on your application **server**. This involves creating a signing key and using that to generate JSON web tokens when you want to access your videos and thumbnails outside of Contentful. By default, all assets uploaded to Mux through Contentful will be created with a single 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 controlling the playback and thumbnail access, you can enable this feature on the Contentful configuration page: Additional global configuration options. When you enable this feature, the following things will happen: 1. The Mux App in Contentful will use the Mux API to create a URL signing key and save this with your Contentful configuration. 2. When uploading an asset, you can select "Protected" in the Privacy Settings section of the configuration modal. If you select this option, the asset will be created with `playback_policy: "signed"` (instead of `"public"`). 3. The signing key from Step 1 will be used by the Mux App to preview content inside the Contentful UI. 4. When you access your content in your own application, outside of Contentful, the Mux asset will no longer have the key `playbackId`, it will now be called `signedPlaybackId`. ```json { "uploadId": "some-upload-id", "assetId": "some-asset-id", "signedPlaybackId": "YOUR_SIGNED_PLAYBACK_ID", "ready": true, "ratio": "16:9" } ``` 5. You should use the value from `signedPlaybackId` 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 [Security: Signed URLs](/docs/guides/secure-video-playback). Note that in the Contentful UI when an asset is using a signed URL you will see this notice. Signed Notice Public and signed playback IDs can be toggled per-entry under the Data tab. Each time the IDs are toggled, the old playback ID is deleted, and a new ID is created in its place. ## Advanced: DRM DRM (Digital Rights Management) provides the highest level of content protection using industry-standard encryption. To use DRM, you must first [request access](https://www.mux.com/support/human). Once approved, you'll receive a DRM Configuration ID. [Learn more about DRM](/docs/guides/protect-videos-with-drm). ### Enabling DRM in Contentful To enable DRM support, go to the Contentful Mux app configuration screen. You will see a new **"Advanced: DRM"** section where you can: 1. Enable or disable DRM support by checking the **Enable DRM** checkbox 2. Enter your **DRM Configuration ID** provided by Mux after your DRM access is approved Enable DRM in Contentful This configuration is stored alongside your other installation parameters and applies to all videos uploaded through this Contentful space. ### Uploading DRM-protected videos Once DRM is enabled and configured, a new **"DRM Protected"** option will appear in the **Privacy Settings** section when uploading or editing a video asset. * The DRM option is only available when both DRM is enabled **and** a valid DRM Configuration ID is present * If DRM is enabled but no Configuration ID is set, the option will appear disabled with contextual help text * When DRM is enabled and configured, **DRM Protected** is selected by default (users can change it to Public or Protected if needed) DRM Protected option in Privacy Settings **Note:** DRM is only available for video assets. If you attempt to upload an audio-only file with DRM selected, the app will display a warning indicating that DRM is not supported for audio files. Use the **Protected** option for secure playback of audio content. ### Viewing DRM-protected videos To view DRM-protected videos in Contentful, you must also have **Signed URLs enabled** in the app configuration. If Signed URLs are not enabled, you will see an error message when trying to view DRM content. See [Advanced: Signed URLs](#advanced-signed-urls) for setup instructions. Due to browser iframe security restrictions, **DRM-protected videos cannot be played directly within the Contentful preview**. When viewing a DRM-protected asset, you will see a notice explaining this limitation. The app provides an **"Open in external player"** link that opens the video in a standalone browser tab where DRM playback is permitted. This external player uses a Blob URL to load the player with the required DRM tokens. DRM warning in preview **Note:** DRM playback incurs additional costs. See the [DRM pricing](/docs/guides/protect-videos-with-drm#pricing) section for details. ### Using DRM-protected videos in your application When you query a DRM-protected video through the Contentful API, the JSON object will include DRM-related information. The generated player code in the **Player Code** tab will automatically include the necessary DRM tokens (`playback`, `thumbnail`, `storyboard`, and `drm` tokens), so you can copy and paste it directly into your application. For more detailed information about implementing DRM playback, including token generation and player configuration, see the [DRM guide](/docs/guides/protect-videos-with-drm). ## Note about version 2.0 release During the month of August 2025, [version 2.0 of the plugin was released](https://github.com/contentful/apps/pull/9826). No action is required as the plugin updates automatically. There are no changes to the previous data structure, but new fields have been added that are necessary to support new features such as audio tracks, MP4 renditions, and others. If you were already using the plugin previously, you may notice that when entering an entry that has a video, it changes to 'Changed' status. This occurs because the new video data is retrieved and stored in Contentful's data. It's like an automatic resync that runs. This is expected behavior and only occurs with videos uploaded before the new version or if changes are made to videos outside of Contentful, as it synchronizes automatically. ## Note about migrating from the old Contentful extension Before releasing the Contentful App, Mux had an officially supported [Contentful extension](https://github.com/contentful/extensions/pull/316). The underlying data structure has not changed, so you can safely migrate to the app without losing data by following these steps: 1. Uninstall the extension (now your video fields should look like raw JSON) 2. Install the app 3. On the configuration screen, apply the Mux App to the video fields that you had before # Integrate with WordPress Learn how to integration Mux with WordPress. The Mux Video Uploader by 2Coders plugin connects WordPress with your Mux account so you can upload, manage and embed videos on your site or application from your WordPress account. This guide explains how to integrate Mux with WordPress using the Mux Video Uploader plugin by 2Coders. This integration enables you to leverage Mux's powerful video infrastructure while maintaining the familiar WordPress content management experience. Follow the steps below to integrate Mux with your WordPress site ## 1. Install the Plugin WordPress plugin can be installed either from WordPress Plugin Directory or Manually by uploading a zipped plugin file. You should be on WordPress.com Business pricing plan or higher to install the Mux Video Uploader plugin. However, there is no such requirement for Self-Hosted WordPress instance. ### A. From the WordPress Plugin Directory 1. In your WordPress admin panel, navigate to `Plugins > Add Plugin` on the sidebar 2. Search and select "Mux Video Uploader by 2Coders" 3. Click `Install and activate` button on the plugin page. ### B: Manual Installation 1. Download the plugin ZIP file from the [WordPress.org site](https://downloads.wordpress.org/plugin/2coders-integration-mux-video.latest-stable.zip). 2. In your WordPress admin panel, go to `Plugins > Add Plugin` 3. Click Upload Plugin and select the downloaded ZIP file 4. Click Install Now and then Activate Plugin After the plugin is properly installed, you should see the Mux Video Uploader plugin on the `Installed Plugins` page. ## 2. Create a Mux Account If you don't already have a Mux account: 1. Sign up at [mux.com](https://dashboard.mux.com/signup) 2. After creating your account, navigate to your dashboard 3. Generate [API Access Token](https://www.mux.com/docs/core/stream-video-files#1-get-an-api-access-token). You'll need both an Access Token ID and Secret Key for the plugin to make API requests. The access token should have Mux Video Read and Write permissions as well as Mux Data (read-only). Mux Video and Mux Data access token permissions ## 3. Connect WordPress to Mux In your WordPress admin panel, locate the new Mux Video menu item 1. Go to Mux Video > Settings 2. Enter your Mux API credentials (API ID and Secret Key) 3. Click Save Settings ## 4. Upload Video The video below shows how to upload a video on WordPress using the Mux Video Uploader plugin. You can also enable advanced features, like Signed URLs, Subtitles & Captions, and MP4 generation during asset creation or later on from the `Assets List` page. ## 5. Play Video ### Using the Gutenberg Block The uploaded video can be added to your WordPress site using the Gutenberg block Editor: 1. Add or Edit a post or page 2. Click the + icon to add a new block 3. Search for "Mux Video" and select the block 4. Choose the asset from the list and click `Insert` 5. Preview and publish your content When using the Gutenberg block, the video is embedded onto the page with the default Mux Player configuration. ### Using the Shortcode Block The same uploaded videos can also be added using the Shortcode block. With the Shortcode, you can customize the Mux Player configuration instead of using the default configuration. ## Advanced video options ### Video Quality Levels When uploading a new video, you can select which Video Quality Levels is used when preparing the Asset. Possible selections are `Basic`, `Plus` and `Premium`. More details can be found in our [Use Video Quality Options](/docs/guides/use-video-quality-levels) guide. ### MP4 Generation Each Asset can be enabled to generate downloadable MP4s. You can select `Highest` or `Audio-Only` or both. This will create [Static Renditions](/docs/guides/enable-static-mp4-renditions) for the Asset and will make MP4 files available for download to client devices using a formatted URL. ### Signed Tokens When uploading a new video, you can select `Protected` option when you want to secure the video playback and `Public` to make the video publicly available. Learn more about [Secure video playback](/docs/guides/secure-video-playback). Mux Video Uploader plugin creates a signing key when configuring the Access Tokens on the plugin's Settings page. The plugin generates Signed URLs when `Protected` option is selected when uploading the video and available on the Asset page as shown in the image below. ### Auto-Generate and Upload Custom Captions/Subtitles With Mux's auto-generated captions, you can easily add captions to videos uploaded by selecting the language of the spoken words. Mux can generate captions automatically while preparing the asset or later. For generating captions later, go to that Asset entry on the Asset List section of the plugin and click on `Add Captions`. More details can be found in the [Add auto-generated captions to your videos and use transcripts](/guides/add-autogenerated-captions-and-use-transcripts) section of our documentation. The "Auto-generated" captions configuration should only be used to generate a single language captions track. The language selected must match the spoken language. Additionally, you can upload one or more custom caption files (during asset creation step or later) for a single asset. # Integrate with Strapi Strapi is an open source content management system that allows you to define your own schemas for your content. The [Mux Video Uploader](https://www.npmjs.com/package/strapi-plugin-mux-video-uploader) plugin allows editors to upload content directly to Mux from within the Strapi interface, then associate those videos with their custom collection types. ## Requirements * A working installation of Strapi that is publicly accessible through a hostname * An [Access Token and Secret Key](/docs/integrations/strapi#2-create-access-in-mux) which is provisioned within Mux Dashboard * Configure a [Webhooks listener](/docs/integrations/strapi#3-configure-webhook-listener) within Mux Dashboard so that Strapi can be informed of upload progress. ## 1. Install the Mux Video Uploader plugin With your existing Strapi installation, run the following command in the root of your Strapi project to install the plugin. Be sure to restart Strapi for the plugin to take effect. As of the 2.1.0 version of this player, only Strapi v4 will be supported. To use with Strapi v3, please use version 2.0.0 of this plugin. ## Install instructions for Strapi v5 Run this command in your project folder if you are using NPM: ```sh npm i strapi-plugin-mux-video-uploader@latest ``` Or this command if you are using yarn with your project: ```sh yarn add strapi-plugin-mux-video-uploader@latest ``` ## Install instructions for Strapi v4 Run this command in your project folder if you are using NPM: ```sh npm i strapi-plugin-mux-video-uploader@2.8.4 ``` Or this command if you are using yarn with your project: ```sh yarn add strapi-plugin-mux-video-uploader@2.8.4 ``` ## Install instructions for Strapi v3 Run this command in your project folder if you are using NPM: ```sh npm i strapi-plugin-mux-video-uploader@2.0.0 ``` Or this command if you are using yarn with your project: ```sh yarn add strapi-plugin-mux-video-uploader@2.0.0 ``` ## 2. Create access token in Mux Generate a new Access Token by going to the Access Token settings of your Mux account dashboard. Mux access token settings The access token should have Mux Video **Read** and **Write** permissions. Mux Video access token permissions After clicking the "Generate Token" button, save the "Access Token ID" and "Secret Key" to be used later. ## 3. Configure Webhook listener Part of the upload process includes Mux updating Strapi with the completion of the upload and processing. In order for Mux to make this communication, a Webhook needs to be established so that events are sent to your Strapi installation. Create a new Webhook configuration in Mux Dashboard. There will be a space to add a "URL to notify". This value should be formatted based on your Strapi's hostname ```txt {YOUR_STRAPI_DOMAIN_HERE}/mux-video-uploader/webhook-handler ``` After saving, copy the "Signing Secret" which will be used later. ## 4. Setup configuration in Strapi In Strapi, visit the Settings page and navigate to the `MUX VIDEO UPLOADER` section. Using the details saved in the previous step, fill in the fields with the appropriate values. Click the "Save" button to persist the changes. ## 5. Upload video Use the Mux Video Uploader page that is now available in Strapi's menu to upload either with a remote URL or directly using a local video file. From here, relationships of Mux assets can be modeled to custom collection types within Strapi to tie metadata with playable content. You now have the ability to upload content to Mux through Strapi CMS! At this point, querying Strapi using REST or GraphQL will give you access to the `playback_id` information. This `playback_id` can be used by your client applications to stream content or retrieve thumbnails. ## 6. Explore advanced options ## Signed tokens Enabling signed URLs in Strapi will require you to generate your own signing tokens on your application **server**. This involves creating a signing key and using that to generate JSON web tokens when you want to access your videos and thumbnails outside of Strapi. By default, all assets uploaded to Mux through Strapi 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 in the Strapi settings for the Mux Video Uploader. When you enable this feature, the following things will happen: 1. The Mux Plugin in Strapi will save the signing keys that you've generated and be available immediately. 2. Any Assets that get created with the Signed Playback URL setting 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 Strapi UI. 4. When you access your content in your own application, use the `MuxAsset.signed` property to determine if the asset is signed by either a `true` or `false` value. ```json { "id": 9, "upload_id": null, "asset_id": "H9H01yni83yRLuu6cKaf8jQI8XW01SPp5XI7WrGsD37n00", "playback_id": "aAqXNee00zlfzR2Rsw01NmGBvxSg1Ocs3g008YChvtG6aM", "signed": true, "isReady": true, "duration": 25.492133, "aspect_ratio": "16:9", "createdAt": "2024-04-01T23:48:19.760Z", "updatedAt": "2024-04-01T23:48:21.605Z" } ``` 5. You should use the signed `playback_id` 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](/docs/guides/secure-video-playback) Note that in the Strapi UI when an asset is using a signed URL you will see a lock icon on the Asset list. ## Encoding Tiers When uploading a new video, you can select what Encoding Tier used when preparing the Asset. Possible selections are `Smart` and `Baseline`. When choosing `Smart` additional options are made available for maximum stream resolutions (1080p, 2K or 4K). More details can be found in our [Use Encoding Tiers](/docs/guides/use-video-quality-levels) section. ## Static Renditions When using the `Smart` Encoding Tier, an option to enable downloadable MP4s will be available. This option will create [Static Renditions](/docs/guides/enable-static-mp4-renditions) for the Asset and will make MP4 files available for download to client devices using a formatted URL. ## Captions/Subtitles With Mux's auto-generated captions, editors can easily add captions to videos being uploaded from Strapi. When using the "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](/docs/guides/add-autogenerated-captions-and-use-transcripts) section of our documentation. If you choose to upload a "Custom" captions file (supported formats are `.vtt` and `.srt`), your file will be uploaded to your instance of Strapi and Mux will pull it via a public URL from your Strapi instance. Take a look at our [Add subtitles/captions to videos](/docs/guides/add-subtitles-to-your-videos) for more details. # Integrate with Cosmic With the Mux Video integration for Cosmic JS, you can upload videos directly to Mux from your Cosmic JS Dashboard. ## 1. Install the Mux Extension Log in to your Cosmic JS account and navigate to Your Bucket > Settings > Extensions. Click the Extensions tab and find the Mux Videos Extension. Hit Install. ## 2. Enter Mux credentials 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). If you need to generate a new Access Token, go to the Access Token settings of your Mux account dashboard. The access token should have **Read** and **Write** permissions for Mux Video. Mux Video access token permissions Go back to the Cosmic Extensions setting page, enter your Mux credentials, and save your Extension. ## 3. Upload video After installing the Extension and setting your Mux account keys, click the Mux Videos Extension link in the left-hand 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. ## 4. Playback To retrieve your video for playback, check out the [Cosmic docs](https://www.cosmicjs.com/articles/mux-videos-extension-overview-jqpvec5d) to see how to add the Mux playback URL to your HTML Video player. # Integrate with DatoCMS With every DatoCMS project you also get a native integration with Mux without any manual intervention. Mux is by default enabled in every new DatoCMS project. The integration allows you to upload videos directly from DatoCMS dashboard or using the [REST API](https://www.datocms.com/docs/content-management-api). The CMS interface will then allow you to use the videos in the content, while on the API side you’ll be able to retrieve the Mux Video URLs and the thumbnail. ## 1. Upload video Just drag and drop a video in DatoCMS media area, like this: ## 2. Fetch video information via GraphQL For every video that you upload, you can get on the API a custom video object with the following properties: * HLS video streaming URL. * High, medium and low quality MP4 versions of the video to support legacy browsers that do not support HLS. * Duration and frame rate of the video. * Thumbnail URL: resizable, cropable and available in JPEG, PNG and GIF format. See the full page of this embedded example [here in the GraphQL explorer](https://cda-explorer.datocms.com/?embed=\&apitoken=faeb9172e232a75339242faafb9e56de8c8f13b735f7090964\&query=%7B%0A%20%20allUploads%28filter%3A%20%7Btype%3A%20%7Beq%3A%20video%7D%2C%20resolution%3A%20%7B%7D%2C%20smartTags%3A%20%7B%7D%7D%29%20%7B%0A%20%20%20%20video%20%7B%0A%20%20%20%20%20%20streamingUrl%0A%20%20%20%20%20%20mp4High%3A%20mp4Url%28res%3A%20high%29%0A%20%20%20%20%20%20mp4Med%3A%20mp4Url%28res%3A%20medium%29%0A%20%20%20%20%20%20mp4Low%3A%20mp4Url%28res%3A%20low%29%0A%20%20%20%20%20%20duration%0A%20%20%20%20%20%20framerate%0A%20%20%20%20%20%20thumbJpg%3A%20thumbnailUrl%28format%3A%20jpg%29%0A%20%20%20%20%20%20thumbPng%3A%20thumbnailUrl%28format%3A%20png%29%0A%20%20%20%20%20%20thumbGif%3A%20thumbnailUrl%28format%3A%20gif%29%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A).