Last active
December 27, 2015 16:39
-
-
Save namendes/7356269 to your computer and use it in GitHub Desktop.
Media Manager player implementation.
Loads still behind the HTML5 player and implements a shadowbox load
Reference (Jan Horsman) - https://gist.github.com/jhorsman/6681918
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 { | |
| position: relative; | |
| display:block; | |
| height:350px; | |
| margin:10px; | |
| } | |
| .overlay | |
| { | |
| display:none; | |
| } | |
| .still { | |
| position: absolute; | |
| } | |
| .playerContainer { | |
| position: absolute; | |
| opacity: 0; | |
| } | |
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
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>MediaManager Services - HT test</title> | |
| <link type="text/css" rel="stylesheet" href="styles/still_resize.css" media="screen"> | |
| <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> | |
| <script type="text/javascript" src="script/still_resize.js"></script>i | |
| <!-- Add fancyBox main JS and CSS files --> | |
| <script type="text/javascript" src="script/jquery.fancybox.js?v=2.1.5"></script> | |
| <link href="Content/jquery.fancybox.css" rel="stylesheet" media="screen" /> | |
| </head> | |
| <body> | |
| <!--<a id="fancybox-manual-a" href="javascript:;">Open single item</a>--> | |
| <a id="fancybox-manual-a" href="#overlay1">Load Video in shadow box</a> | |
| <div class="overlay" id="overlay1" data-mmdistributionurl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=46B1935E-C3F9-4C8D-A34F-361A9B4667E3"> | |
| </div> | |
| <div class="mmPlayer" data-mmdistributionurl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=46B1935E-C3F9-4C8D-A34F-361A9B4667E3"> | |
| </div> | |
| <div class="mmPlayer" data-mmdistributionurl="http://sdl-training.dist.sdlmedia.com/vms/distribution/embed/?o=2981B015-A171-4C6A-BEC6-9C0BC80B9F4E"> | |
| </div> | |
| <script type="text/javascript"> | |
| $(document).ready(function ($) | |
| { | |
| $("#fancybox-manual-a").click(function () { | |
| var overPlayer = $('#overlay1'); | |
| overPlayer.empty(); | |
| $.fancybox.open(overPlayer); | |
| loadPlayer(overPlayer, 'overlay1'); | |
| }); | |
| $(".mmPlayer").each(function (index, value) | |
| { | |
| loadPlayer($(value),index); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </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
| function loadPlayer(playerElement, suffix) | |
| { | |
| distributionUrl = playerElement.attr("data-mmDistributionUrl"); | |
| if (!distributionUrl) { | |
| return; | |
| } | |
| var size = { height: '480px', width: '640px' }; | |
| loadStill(playerElement, distributionUrl, size); | |
| loadPlayerContainer(playerElement, distributionUrl, size, suffix); | |
| // alert(playerElement.attr('class')); | |
| } | |
| function loadStill(playerElement, distributionUrl,size) { | |
| stillUrl = distributionUrl.replace("distribution/?o=", "distribution/?f=").concat("&ext=.jpg"); | |
| playerElement.css('height', size.height); | |
| playerElement.css('width', size.width); | |
| var still = jQuery('<div>', { class: 'still' }); | |
| var backgroundImage = jQuery('<img>', { src: stillUrl }); | |
| if (size.height) { | |
| backgroundImage.css('height', size.height); | |
| } | |
| if (size.width) { | |
| backgroundImage.css('width', size.width); | |
| } | |
| still.append(backgroundImage).appendTo(playerElement); | |
| } | |
| function loadPlayerContainer(playerElement, distributionUrl, size, index) { | |
| playerElement.bind("player-ready", size, event_playerready); | |
| playerId = "MediaManagerAjaxPlayer_" + index; | |
| ajaxLoaderUrl = distributionUrl.replace("distribution/?o=", "distribution/embed/?o=").concat("&trgt=" + playerId); | |
| var player = jQuery('<div>', { id: playerId, class: 'playerContainer' }); | |
| player.appendTo(playerElement); | |
| $.getScript(ajaxLoaderUrl); | |
| } | |
| function showPlayer(playerContainerSelector, size) { | |
| var f1 = playerContainerSelector.children('[id^=sdlmm_placeholder_sdlmm_MediaManagerAjaxPlayer]'); | |
| var f2 = f1.children('[id^=pd_sdlmm_MediaManagerAjaxPlayer]'); | |
| //var f1 = playerContainerSelector.children(); | |
| //var f2 = f1.children(); | |
| if (!playerContainerSelector.attr('resized')) { | |
| playerContainerSelector.attr('resized', true); | |
| if (size.height) { | |
| playerContainerSelector.css('height', size.height); | |
| f1.css('height', size.height); | |
| f2.css('height', size.height); | |
| } | |
| if (size.width) { | |
| playerContainerSelector.css('width', size.width); | |
| f1.css('width', size.width); | |
| f2.css('width', size.width); | |
| } | |
| } | |
| $(playerContainerSelector).fadeTo("slow", 1); | |
| } | |
| function event_playerready(event) { | |
| var playerContainer = $(event.target).parent(); | |
| showPlayer(playerContainer, event.data); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Try this script on http://fiddle.jshell.net/Jhorsman/9Ttt8/