jhorsman/workaround.html

## workaround.html
<!DOCTYPE html>
<html>
<head>
	<!--<script src="jquery-2.0.3.min.js"></script>-->
	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script>
		$(document).ready(function() {
			$("#myPlayer").bind("player-ready", event_playerready);
			$(document).bind("MMPLAYERREADY", event_MMPLAYERREADY);
		});

		function event_playerready(event) {
			// former bug: the player-ready event would be triggered twice for every player
			var playerDiv = $(event.target);
			console.log("player-ready event fired for div with id: " + playerDiv.attr("id"));
		}

		function event_MMPLAYERREADY(event) {
			console.log("MMPLAYERREADY event fired on div with id " + event.value);
			// workaround: get the player div based on the string in event.value. The player-ready event would have the player dom node in the event.target parameter.
			// this workaround does not apply when you want to apply different logic on different players, as this function applies to all players in the document.
			var playerDiv = $("#" + event.value);
			console.log("  as a workaround we found the player div. id: " + playerDiv.attr("id"));
		}
	</script>
	<style type="text/css">
		.player {
			background-color: #E0E0E0;
			width: 600px;
			height: 338px;
		}
	</style>
</head>
<body>
</body>
	<div id="myPlayer" class="player">
		<script type="text/javascript" language="javascript" src="http://sdl-training.dist.sdlmedia.com/vms/distribution/embed/?o=2981B015-A171-4C6A-BEC6-9C0BC80B9F4E"></script>
	</div>
	<p>See the logging messages in the console</p>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!--<script src="jquery-2.0.3.min.js"></script>-->
	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script>
	$(document).ready(function() {
	$("#myPlayer").bind("player-ready", event_playerready);
	$(document).bind("MMPLAYERREADY", event_MMPLAYERREADY);
	});

	function event_playerready(event) {
	// former bug: the player-ready event would be triggered twice for every player
	var playerDiv = $(event.target);
	console.log("player-ready event fired for div with id: " + playerDiv.attr("id"));
	}

	function event_MMPLAYERREADY(event) {
	console.log("MMPLAYERREADY event fired on div with id " + event.value);
	// workaround: get the player div based on the string in event.value. The player-ready event would have the player dom node in the event.target parameter.
	// this workaround does not apply when you want to apply different logic on different players, as this function applies to all players in the document.
	var playerDiv = $("#" + event.value);
	console.log(" as a workaround we found the player div. id: " + playerDiv.attr("id"));
	}
	</script>
	<style type="text/css">
	.player {
	background-color: #E0E0E0;
	width: 600px;
	height: 338px;
	}
	</style>
	</head>
	<body>
	</body>
	<div id="myPlayer" class="player">
	<script type="text/javascript" language="javascript" src="http://sdl-training.dist.sdlmedia.com/vms/distribution/embed/?o=2981B015-A171-4C6A-BEC6-9C0BC80B9F4E"></script>
	</div>
	<p>See the logging messages in the console</p>
	</html>