Mux EE Module Docs

for ExpressionEngine

Video.js

<html>
    <head>
        <title>Mux Video JS Example</title>
        <script src="https://unpkg.com/@mux/videojs-kit@latest/dist/index.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@mux/videojs-kit@latest/dist/index.css">  
    </head>

<body>

<h2>Asset Example</h2>

{exp:channel:entries
    channel="events"
    show_expired="yes"
    show_future_entries="yes"
    status="open|closed"
    }

<!-- The name of your Mux Assets Custom Field below: -->
{mux_asset_field}
<section class="basic_box">

    <article>
        {if audio_only}
            <audio 
                id="my-player" 
                class="video-js vjs-fluid" 
                controls 
                width="100%"
                data-setup='{
                    fluid: true,
                    "plugins": {
                        "mux": {
                            "data":{
                                "env_key": "{env_key}",
                                "video_title": "{if name}{name}{if:else}{filename}{/if}"
                            }
                        }
                    }
                }'
            >
            <source src="{playback_url}" type="video/mux" />
            </audio>            
        {if:else}
            <video 
                id="my-player" 
                class="video-js vjs-16-9" 
                controls 
                preload="auto" 
                width="100%"
                poster="{thumbnail_url}"
                data-setup='{
                    "timelineHoverPreviews": true,
                    "plugins": {
                        "mux": {
                            "data":{
                                "env_key": "{env_key}",
                                "video_title": "{if name}{name}{if:else}{filename}{/if}"
                            }
                        }
                    }
                }'
            >
            <source src="{playback_url}" type="video/mux" />
            </video>
        {/if}

    </article>

</section>
{/mux_asset_field}
{/exp:channel:entries}
</body>        
</html>