moret/h264-levels.html

## h264-levels.html
<!DOCTYPE HTML>
<html>

<head>
	<title>H.264 Level Calculator</title>
	<style>
textarea {
	width: 640px;
	height: 360px;
}
label, input {
	margin: 1em;
}
	</style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
    <script>

var startParams = {
	width: 640,
	height: 360,
	framerate: 29.97
}

var levels = {
	'1': 1485,
	'1b': 1485,
	'1.1': 3000,
	'1.2': 6000,
	'1.3': 11880,
	'2': 11880,
	'2.1': 19800,
	'2.2': 20250,
	'3': 40500,
	'3.1': 108000,
	'3.2': 216000,
	'4': 245760,
	'4.1': 245760,
	'4.2': 522240,
	'5': 589824,
	'5.1': 983040
}

$(document).ready(function() {
	$.each(startParams, function(name, value) {
		$('form').append("<div><label for='" + name + "'>" + name + "</lable><input type='text' name='" + name + "' value='" + value + "'/></div>");
	});
	$('form').append("<input type='submit'/>");
});

function calculate() {
	try {
		var width = $("input[name='width']").val();
		var height = $("input[name='height']").val();
		var framerate = $("input[name='framerate']").val();

		var macroblocks = Math.ceil( width / 16 ) * Math.ceil( height / 16 ) * framerate;

		var level = 'unknown';
		$.each(levels, function(levelName, levelMacroblocks) {
			if (levelMacroblocks > macroblocks) {
				if (levels[level] === undefined || levelMacroblocks < levels[level]) {
					level = levelName;
				}
			}
		});

		log(width + 'x' + height + '@' + framerate + ': level => ' + level);
	} catch (err) {
		console.log(err);
	}

	return false;
}

function log(msg) {
	$('#log').append(msg + '\n');
}
    </script>
</head>

<body>

<form onsubmit='return calculate();'></form>
<textarea id="log"></textarea>

</body>

</html>
	<!DOCTYPE HTML>
	<html>

	<head>
	<title>H.264 Level Calculator</title>
	<style>
	textarea {
	width: 640px;
	height: 360px;
	}
	label, input {
	margin: 1em;
	}
	</style>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
	<script>

	var startParams = {
	width: 640,
	height: 360,
	framerate: 29.97
	}

	var levels = {
	'1': 1485,
	'1b': 1485,
	'1.1': 3000,
	'1.2': 6000,
	'1.3': 11880,
	'2': 11880,
	'2.1': 19800,
	'2.2': 20250,
	'3': 40500,
	'3.1': 108000,
	'3.2': 216000,
	'4': 245760,
	'4.1': 245760,
	'4.2': 522240,
	'5': 589824,
	'5.1': 983040
	}

	$(document).ready(function() {
	$.each(startParams, function(name, value) {
	$('form').append("<div><label for='" + name + "'>" + name + "</lable><input type='text' name='" + name + "' value='" + value + "'/></div>");
	});
	$('form').append("<input type='submit'/>");
	});

	function calculate() {
	try {
	var width = $("input[name='width']").val();
	var height = $("input[name='height']").val();
	var framerate = $("input[name='framerate']").val();

	var macroblocks = Math.ceil( width / 16 ) * Math.ceil( height / 16 ) * framerate;

	var level = 'unknown';
	$.each(levels, function(levelName, levelMacroblocks) {
	if (levelMacroblocks > macroblocks) {
	if (levels[level] === undefined \|\| levelMacroblocks < levels[level]) {
	level = levelName;
	}
	}
	});

	log(width + 'x' + height + '@' + framerate + ': level => ' + level);
	} catch (err) {
	console.log(err);
	}

	return false;
	}

	function log(msg) {
	$('#log').append(msg + '\n');
	}
	</script>
	</head>

	<body>

	<form onsubmit='return calculate();'></form>
	<textarea id="log"></textarea>

	</body>

	</html>