Michael Brown February 14 2014 01:00:25 PM
I'm looking at rolling out HTML5 video for a site that I'm working on. The site is made up of Notes documents, and I would be storing the video files on Rich Text fields within those documents. I last looked at this about six months ago, and well, things in the HTML5 Video world were something of mess.
Six Months Ago
There are three HTML5 formats:
- H264 (.mp4 file), favoured by Microsoft and Apple
- Theora (.ogv file), favoured by Mozilla
- VP8 (.webm file) favoured by Google
If you looked at the W3 Schools' HTML5 Video
Look at that W3 Schools' HTML5 Video
page now though, and you'll see that there's been some major movement: Firefox now supports H264 .mp4!! Only on Windows, and then only Windows Visa or higher at the moment, although Mac and Linux is supposed to be coming (maybe XP as well?)
The second major change is an internal one: my site no longer needs to support IE8 or earlier. So, yes, that means we can use only one file format!! .mp4 saves the day!
That's when I ran into problems. The videos would play on some browsers but not others.
If you have such problems, then you need to check your MIME types are set up correctly for HTML5 video on the Domino server. If the MIME type is missing on your Domino server, then you'll likely see the video as something like "application/octet-stream" in Chrome:
For .mp4, the browser should show a MIME type of "video/mp4" as shown below (in Chrome):
To fix this, you need to have your friendly Domino admin edit the httpd.cnf file, which should be somewhere in your server's Domino folder. For .mp4, you need to add the following line to the that file:
AddType .mp4 video/mp4
Your admin will need to restart the HTTP task after saving the file. (I don't think a refresh is enough.)
That fixed things on the desktop browsers, but there was still one major problem. My .mp4 files wouldn't play on iPhones or iPads. It worked fine on desktop, and most annoyingly, on a test Android phone! On the iPhone though, it just showed with a line through it, and refused to play:
As iDevice compatibility was one of the big pay-offs for doing this project in the first place, so I had to simply get it working.
At first, I thought it must be something to do with the video file encoding. Apple's devices are very fussy about the .mp4 encoding for HTML5 web video. It has to be H264 encoded for video, with AAC for audio. But I couldn't get that to work on our internal network. Oddly enough though, the same video file was served up fine to me iPhone by my own, personal Domino server. Was it the company network messing things up then?
Nope, it was something far more dumb than that. It was Domino compression.
Don't Compress Video in Notes!
When I was adding the .mp4 files to my Notes Rich Text fields, I was doing it dragging and dropping them from the Windows File Manager. But if you do that, the files are always
compressed. This was pointless because these kind of files are already compressed up to the eyeballs before they reach Domino.
I knew all this, but didn't think it could possibly be the problem. Almost out of desperation, I deleted the video from the Rich Text field, then reattached it using the paperclip icon, remembering to untick the Compress
checkbox as I did it. Bingo! My .mp4 file now plays fine on my iPhone:
Why this should be the case, and for iDevices only, I'm not really sure. My guess is that when Domino serves up a compressed file, there's a short delay while the server decompresses it, and the iPhone is being over sensitive to that delay.