html 预加载SDL Media Manager视频播放器的静止图像。见http://jsfiddle.net/Jhorsman/nQ85f/

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 预加载SDL Media Manager视频播放器的静止图像。见http://jsfiddle.net/Jhorsman/nQ85f/相关的知识，希望对你有一定的参考价值。

.mmPlayer {
    height: 350px;
    position:  relative;
}

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

.mmPlayer .container {
    position: absolute;
    opacity: 0;
    height: 338px;
    z-index: 100;
}

<!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>

以上是关于html 预加载SDL Media Manager视频播放器的静止图像。见http://jsfiddle.net/Jhorsman/nQ85f/的主要内容，如果未能解决你的问题，请参考以下文章

html 播放器准备好事件bug和变通方法。此错误已在SDL Media Manager 2.4或更早版本中修复。

markdown 使用SDL Media Manager动态图像再现裁剪图像

找不到预加载的图像 (emscripten)

powershell 将AppData从一个SDL Web Content Manager项目复制到另一个SDL Web Content Manager项目。我使用此脚本在con之后修复媒体管理器EC