jan-h
10/31/2013 - 12:37 PM

Pre-load stills for a SDL Media Manager video player. See http://jsfiddle.net/Jhorsman/nQ85f/

Pre-load stills for a SDL Media Manager video player. See http://jsfiddle.net/Jhorsman/nQ85f/

stylesheet.css
content_copyfile_download
.mmPlayer {
    height: 350px;
    position:  relative;
}

.mmPlayer .still {
    position: absolute;
    z-index: 90;
}

.mmPlayer .container {
    position: absolute;
    opacity: 0;
    height: 338px;
    z-index: 100;
}
preload-example.html
content_copyfile_download
<!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>