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 %}
<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 %}

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 needs JWT token to play #}
            {% set videoToken = muxAsset.getSecurePlaybackJWT(keyID) %}
            {# Thumbnail needs JWT token to render #}
            {% set thumbToken = muxAsset.getSecurePlaybackJWT(keyID, 't') %}
            {# Storyboard needs JWT token to render #}
            {% set storyboardToken = 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 %}