JSFiddle - React, Tailwind, and code Playground

by Jhorsman

HTML

<p>See <a href="https://gist.github.com/jhorsman/7248974">Code on Gist</a></p>

Player A
<!-- old style distribution URL -->
<div class="mmPlayer" data-mmDistributionUrl="http://mmdemo.dist.sdlmedia.com/vms/distribution/?o=3B683F85-39C8-4259-A747-1B55048A78D6">
    <div class="still"></div>
    <dv class="container"></div>
</div>

Player B
<div class="mmPlayer" data-mmDistributionUrl="https://mmdemo.dist.sdlmedia.com/Distributions/?o=3B683F85-39C8-4259-A747-1B55048A78D6">
    <div class="still"/></div>
    <div class="container"></div>
</div>

CSS

.mmPlayer {
    height: 350px;
    position: relative;
}
 
.mmPlayer .still {
    position: absolute;
    z-index: 90;
}
 
.mmPlayer .container {
    position: absolute;
    opacity: 0;
    height: 338px;
    z-index: 100;
}

JavaScript

$(document).bind("MMPLAYERREADY", function (event) {
    showContainter(event.value.replace('sdlmm_placeholder_sdlmm_', '#'), true);
});
 
$(".mmPlayer").each(loadPlayer);
function loadPlayer(index) {
    console.debug("loadStill() " + index);
    playerElement = $(this);
    distributionUrl = playerElement.attr("data-mmDistributionUrl");
    if(!distributionUrl) {
        console.debug("stillUrl() no data-mmDistributionUrl attribute found");
        return;
    }
    loadStill(playerElement, distributionUrl);
    loadPlayerScript(playerElement, distributionUrl, index);
}

function loadStill(playerElement, distributionUrl) {
    stillUrl = distributionUrl.replace("distribution/?o=", "distribution/?f=").replace("Distributions/?o=", "Distributions/?f=").concat("&ext=.jpg");
    console.debug("stillUrl: " + stillUrl);
    playerElement.find(".still").first().append('<img src="' + stillUrl + '" width="600px"/>');
}

function loadPlayerScript(playerElement, distributionUrl, index) {
    playerId = "MediaManagerAjaxPlayer_" + index;
    console.debug("playerId: " + playerId);
    ajaxLoaderUrl = distributionUrl.replace("distribution/?o=", "distribution/embed/?o=").replace("Distributions/?o=", "Distributions/embed/?o=").concat("&trgt=" + playerId);
    console.debug("ajaxLoaderUrl: " + ajaxLoaderUrl);
    playerElement.find(".container").first().attr("id", playerId)
    $.getScript(ajaxLoaderUrl);
 }

function showContainter(playerContainerSelector, debug) {
    if (debug == true)
        console.debug("showContainter; container name: " + playerContainerSelector);
    $(playerContainerSelector).fadeTo("Fast", 1);
}