Skip to content

Instantly share code, notes, and snippets.

@namendes

namendes/resize.css

Created November 5, 2013 13:19
Show Gist options
  • Save namendes/7318890 to your computer and use it in GitHub Desktop.
Save namendes/7318890 to your computer and use it in GitHub Desktop.
Download ZIP
Media Manager Still with resize
Raw
resize.css
/*.mmPlayer {
height: 350px;
position: relative;
}
.mmPlayer .still {
position: absolute;
z-index: 90;
}
.mmPlayer .container {
position: absolute;
opacity: 0;
height: 338px;
z-index: 100;
}*/
Raw
resize.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="still.css" rel="stylesheet" />
</head>
<body>
<p>
<ul>
<li>The Media Manger player is loaded in a div.</li>
<li>The function setPlayerResizeEvent() resizes the player</li>
</ul>
<p>
<div id='71731aa0-ebaa-4e35-8b99-7c942dc3869f' class="MMHTML5Player"></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type='text/javascript' language='javascript' >
$.getScript("http://sdl-training.dist.sdlmedia.com/vms/distribution/embed/?o=2981B015-A171-4C6A-BEC6-9C0BC80B9F4E&trgt=71731aa0-ebaa-4e35-8b99-7c942dc3869f");
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function () { setPlayerResizeEvent(".MMHTML5Player", 378, 238); });
</script>
<script type="text/javascript" src="resize.js"></script>
</html>
Raw
resize.js
// before deploying this, remove the following line
var $j = jQuery;
function setPlayerResizeEvent(playerContainerSelector, playerWidth, playerHeight, debug) {
if (playerContainerSelector == "") {
if (debug == true)
console.debug("setPlayerResizeEvent: Invalid argument, playerContainerSelector is not set");
return;
}
if (playerWidth == "" || playerHeight == "") {
if (debug == true)
console.debug("resizeMediaManagerPlayer: Invalid arguments, playerWidth and playerHeight are required; container name: " + playerContainerSelector + "; player width: " + playerWidth + "; player height: " + playerHeight);
return;
}
setContainerDimensions(playerContainerSelector, playerWidth, playerHeight, debug);
$j(playerContainerSelector).bind("player-ready", function () {
resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight);
showContainter(playerContainerSelector, debug);
});
}
function setContainerDimensions(playerContainerSelector, playerWidth, playerHeight, debug) {
if (debug == true)
console.debug("setContainerDimensions; container name: " + playerContainerSelector + "; player width: " + playerWidth + "; player height: " + playerHeight);
$j(playerContainerSelector).css({ 'opacity': 0, 'width': playerWidth, 'height': playerHeight });
}
function showContainter(playerContainerSelector, debug) {
if (debug == true)
console.debug("showContainter; container name: " + playerContainerSelector);
$j(playerContainerSelector).fadeTo("fast", 1);
}
function resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight) {
var mediaManagerPlaceholder = $j(playerContainerSelector).children().last()
var projekktorPlayer = mediaManagerPlaceholder.children().first()
//Rezise the player div, the media manager placeholder and the projekktor player
$j(playerContainerSelector).css({ 'width': playerWidth, 'height': playerHeight });
mediaManagerPlaceholder.css({ 'width': playerWidth, 'height': playerHeight });
projekktorPlayer.css({ 'width': playerWidth, 'height': playerHeight });
}
Raw
still.css
.mmPlayer {
height: 350px;
position: relative;
}
.mmPlayer .still {
position: absolute;
z-index: 90;
}
.mmPlayer .container {
position: absolute;
opacity: 0;
height: 338px;
z-index: 100;
}
Raw
still.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="still.css" rel="stylesheet" />
</head>
<body>
See <a href=""></a>
Player A
<div class="mmPlayer" data-mmDistributionUrl="http://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/vms/distribution/?o=3B683F85-39C8-4259-A747-1B55048A78D6">
<div class="still"/></div>
<div class="container"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="still.js"></script>
</html>
Raw
still.js
$(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=").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=").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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment