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

{% 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.

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

Signed Keys

There are a couple methods to get signed keys.

Using the Signed Keys plugin variable.

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

Getting keys from a Mux Element method

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