Players Overview

Mux delivers a standard HLS link, a video streaming format that many web players can handle. The advantage is a lot of flexibility and no vendor lock-in for playback experiences, but you will need to decide on what player to use. If you don't know where to start, use Mux Player first.

There are 2 ways of building a player into your website templates.

A single iFrame-like tag with a few options (easy)

Using the included :player tag, with a few options, embeds a player into the page. This is most like other copy and paste direct embeds and uses a compatible player under the hood.

Use a Player of Choice to build a custom implementation

Use one of many compatible players to build a unique experience. Choosing this option provides the greatest flexibility and options. Most players are fairly straightforward in setup, and the provided tags makes it as copy-and-paste as possible. If the player supports HLS, it can be used. Further in the guide you will find the boilerplate code to get up and running.

1. Simple Live Example with :player Tag

This example has the smallest amount of template code to get up and running with a video with a few options to customize.

{exp:channel:entries...}

    // Live
    {mux_live} // Your custom field name.
        {exp:mux:player 
            mux_id="{mux_id}" // Required.
            dvr="yes"  // Optional for live.
            start="{entry_date format='{DATE_ISO8601}'}"  // Optional for live.
            end="{expiration_date format='{DATE_ISO8601}'}" // Optional for live.  
            image="{your_image_field}" // Optional.
        }
    {/mux_live}


   // VOD
    {mux_asset} // Your custom field name.
        {exp:mux:player 
            mux_id="{mux_id}" // Required.
            image="{your_image_field}" // Optional.
        }
    {/mux_asset}

{/exp:channel:entries}

{exp:channel:entries...}

    {mux_asset} // Your custom field name.  Asset or Live

        // Primary Video
        {exp:mux:player mux_id="{mux_id}" }

        // Live-only
        {recordings}
            {exp:mux:player mux_id="{recording_mux_id}" }
        {/recordings}

        // Asset-only
        {clips}
            {exp:mux:player mux_id="{clips_mux_id}" }
        {/clips}        

    {/mux_asset}

{/exp:channel:entries}

Using URL Segment to pass IDs

// Getting Mux ID from URL.
// URL Example: /index.php/template_group/template/(mux_id)

{exp:mux:getmux_id="{segment_3}"}
    {exp:mux:player mux_id="{mux_id}" image="{thumbnail_image}"}
{/exp:mux:get}