Skip to content

Instantly share code, notes, and snippets.

@jhorsman

jhorsman/preload-example.html

Last active December 27, 2015 01:59
Show Gist options
  • Save jhorsman/7248974 to your computer and use it in GitHub Desktop.
Save jhorsman/7248974 to your computer and use it in GitHub Desktop.
Download ZIP
Pre-load stills for a SDL Media Manager video player. See http://jsfiddle.net/Jhorsman/nQ85f/
Raw
preload-example.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Dynamic SDL Media Manager video embed</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
Player A
<div class="mmPlayer" data-mmDistributionUrl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=3B683F85-39C8-4259-A747-1B55048A78D6">
<div class="still"></div>
<div 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>
<script>
$(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);
}
</script>
</body>
</html>
Raw
stylesheet.css
.mmPlayer {
height: 350px;
position: relative;
}
.mmPlayer .still {
position: absolute;
z-index: 90;
}
.mmPlayer .container {
position: absolute;
opacity: 0;
height: 338px;
z-index: 100;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment