Created
November 5, 2013 13:19
-
-
Save namendes/7318890 to your computer and use it in GitHub Desktop.
Media Manager Still with resize
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*.mmPlayer { | |
| height: 350px; | |
| position: relative; | |
| } | |
| .mmPlayer .still { | |
| position: absolute; | |
| z-index: 90; | |
| } | |
| .mmPlayer .container { | |
| position: absolute; | |
| opacity: 0; | |
| height: 338px; | |
| z-index: 100; | |
| }*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 }); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .mmPlayer { | |
| height: 350px; | |
| position: relative; | |
| } | |
| .mmPlayer .still { | |
| position: absolute; | |
| z-index: 90; | |
| } | |
| .mmPlayer .container { | |
| position: absolute; | |
| opacity: 0; | |
| height: 338px; | |
| z-index: 100; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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