Dynamic HTML5 video page generator

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).

Apple sucks

I was given an iPad. I decided to try it out.
After multitude of accepts of EULA, filling out personal information (apple ID shit), silly security questions, I managed to get to “use” it.

First thing I did is to try out my CCTV feeds in Safari. These work everywhere (Linux, FreeBSD, Windows, OSX etc.), well everywhere except iOS.

Epic fail.

My CCTV feeds are simple HTML5 <video> tags with webm container and libvpx format. I feed them via ffserver/ffmpeg.
Very clean and efficient setup (here is the html/javascript example).

Shitty safari browser does not support webm. Installing “different” browser not going to help as any “different” browser is just a skin to the shitty safari. Apple does not allow alternative browsers.

So next option is to try mp4 container with h264 format, only problem is mp4 does not work with non seekable video.
You get this:

[mp4 @ 0x25185b0]muxer does not support non seekable output

Epic fail indeed.

So shall I try HLS? Good luck with that, I can’t even trouble shoot it because iOS is so castrated (view source? browser console? anything?)!
I didn’t get anywhere with HLS either (no idea how to test it without Apple envirnoment with some basic debugging tools).
Besides HLS is not a true video tag.
In reality Safary is a non-HTML5 browser and does not support HTML5. Because of the browser lock-in there is no way for iOS to support HTML5 (this should be illegal, it should be my choice what I run on my device). Thus iOS devices are stuck in stone age.

Reality distortion field is a real thing, there are some serious issues with iOS (FFS! At least support open/royalty free formats).
As far as I am concerned iPad and iPhone is a fucking toy, as because of the walled garden it limits usability of the device.

Because of this I will not willingly buy anything from Apple. Screw you Apple.

P.S. I installed Firefox for shits and giggles and it was a far cry from actual Firefox. Why they even bother, they only tar their image because of how shitty Firefox on iOS is (and no, there are no customisation or extensions)!

P.P.S. there is another way of making this work: play 10-30second videos with javascript loading them (while they are being generated on server). I might implement it once I get over it…