Not sure if this is optimal, as I am not a “web” developer, here is a dynamically generated simple HTML5 page:
<!DOCTYPE html>
<html>
<script type="text/javascript">
function sVideo(){
d = new Date();
var streams = ["stream1","steam2","steam3","streamN","streamN+1"];
var l = streams.length;
for (var i = 0; i < l; i++){
var vDiv = document.createElement("div");
vDiv.style.position="relative";
vDiv.style.cssFloat="left";
vDiv.style.display="table-row";
var vVideo = document.createElement("video");
vVideo.id = streams[i];
var source = document.createElement('source');
source.src = 'http://example.com/video/'+streams[i]+'?t='+ d.getTime();
source.type = 'video/webm'
vVideo.appendChild(source);
vVideo.play();
vVideo.removeAttribute("controls");
vDiv.appendChild(vVideo);
var aDiv = document.getElementById("anchor");
aDiv.appendChild(vDiv);
}
}
</script>
<body onload="sVideo()">
<div id="anchor" style="position:relative; float:left; display:table">
</div>
</body>
</html>
Here what it does:
For every stream in the list ‘streams’ it generates a div (the divs are arranged in a table), into which it places video block with stream source and type.
This page does not work with iOS because it does not support webm. On other hand it works perfectly fine on a shitty $50 android device. Actually it works everywhere except iOS (Linux, Windows, Android, FreeBSD and OSX).