VitePress

Mux Player Rendering ​

View the MUX documentation regarding their video player component. It will describe where to get access to the player either by CDN or including via NPM along with all the params and events.

Basic Player Rendering ​

twig
{% set muxAsset = craft.mux.one() %}
{% if muxAsset and muxAsset.playback_ids|length %}
<mux-player
    primary-color="#ffffff"
    stream-type="on-demand"
    metadata-video-id="{{ muxAsset.asset_id }}"
    playback-id="{{ muxAsset.playback_ids[0].id }}"
    metadata-video-title="{{ muxAsset.title }}"></mux-player>
{% endif %}

Guard against empty playback_ids (asset still preparing or errored). For audio-only assets (muxAsset.isAudioOnly), the same player works; skip thumbnail and storyboard tokens — those image endpoints do not apply.

Secure Player Rendering ​

This assumes you have created a Signed Key in teh Signed Keys settings.

twig
{% set muxAsset = craft.mux.one() %}
{% if muxAsset %}
    {% if muxAsset.securePlayback %}
        {% set tokens = muxAsset.signedKeys %}
        {% if tokens|length >= 1 %}        
            {% set keyID = key.key_id %} 
            {# Video / audio needs JWT token to play #}
            {% set videoToken = muxAsset.getSecurePlaybackJWT(keyID) %}
            {# Thumbnail and storyboard tokens only apply to video assets #}
            {% set thumbToken = muxAsset.isAudioOnly ? null : muxAsset.getSecurePlaybackJWT(keyID, 't') %}
            {% set storyboardToken = muxAsset.isAudioOnly ? null : muxAsset.getSecurePlaybackJWT(keyID, 's') %}

            <mux-player
                class="aspect-video"
                primary-color="#ffffff"
                stream-type="on-demand"
                metadata-video-id="{{ muxAsset.asset_id}}"
                playback-id="{{ muxAsset.playback_ids[0].id }}"
                metadata-video-title="{{ muxAsset.title }}"
                playback-token="{{ videoToken }}"
                thumbnail-token="{{ thumbToken }}"
            ></mux-player>
        {% endif %}
    {% endif %}
{% endif %}

Craft Variable Helpers ​

These methods are available on the craft variable (via MuxAssetBehavior) and return rendition metadata useful for building custom download UIs or forms.

muxRenditionOptions() ​

Returns all available rendition options as an associative array of value => label pairs, ordered for display (Highest first, Audio Only last).

twig
{% set options = craft.muxRenditionOptions() %}
{# Returns: {'highest': 'Highest', '2160p': '2160p', ..., 'audio-only': 'Audio Only'} #}

{% for value, label in options %}
    <option value="{{ value }}">{{ label }}</option>
{% endfor %}

muxSpecificResolutions() ​

Returns an array of the specific resolution values (excludes highest and audio-only). Useful for enforcing mutual-exclusivity rules in front-end UI — these values cannot be combined with highest.

twig
{% set specific = craft.muxSpecificResolutions() %}
{# Returns: ['2160p', '1440p', '1080p', '720p', '540p', '480p', '360p', '270p'] #}

Signed Keys ​

There are a couple methods to get signed keys.

Using the Signed Keys plugin variable. ​

twig
{% set key = craft.signedKeys.one() %}

Getting keys from a Mux Element method ​

twig
{% set muxAsset = craft.mux.one() %}
{% if muxAsset %}
    {% if muxAsset.securePlayback %}
        {% set keys = muxAsset.securePlaybackTokens %}
        {% if keys|length %}        
            {% set keyID = key[0].key_id %} 
        {% endif %}
    {% endif %}
{% endif %}