HTML5, CSS3, jQuery, JSON, Responsive Design...

Serving HTML5 Video from Domino

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 page, you would seen the major problem with the whole thing:  there wasn't a single one of those file formats that was supported by all 3 of the major browsers!  Furthermore, Internet Explorer requires at least version 9 to support any kind of HTML5 video, and my site needed to support IE7 and IE8.  So, we would have been forced to keep at least two versions of our video files converted to cover the big three browsers, plus a JavaScript/Flash fallback for IE8 and earlier.  I decided to keep using our Flash/JavaScript video solution, which has the major problem that it won't play on iPads or iPhones.

Today

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.  


MIME Type

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:
MP4 with missing MIME type


For .mp4, the browser should show a MIME type of "video/mp4" as shown below (in Chrome):
MP4 with correct MIME type

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


Apple iDevices

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:
MP4 video won't play on iPhone

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:
MP4 video ready to play on 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.


 
Comments

1David Leedy  02/13/2014 4:52:51 PM  Serving HTML5 Video from Domino

How big are your videos? Isn't there still a 64 GB limit for an .nsf?

I've thought about doing this for my site but I guess I'm just not convinced putting the videos in a notes document is going to work well over a long haul. Especially at high traffic times when a video is released and there's lots of people hitting it.

I guess I just THINK putting it on the server somewhere as a file - and having the notes document point to it is better performing... but again I don't know... not an admin. :)

For now I put my videos on a host - libsyn.com. That works well but I'd sure like to save that monthly cost if possible.

I will say that a while back I played with the projekktor project. I got that working in XPages a bit. Really liked that. Might be worth looking into for you. That worked on iDevices really well. and had a small flash fallback if necessary.

Great post! thanks for sharing!!

Dave

2Michael Brown  02/13/2014 9:43:50 PM  Serving HTML5 Video from Domino

@David,

Videos quite small, and the site is an internal one (i.e. intranet) so traffic not an issue.

For an external site with big files and high traffic, I'd say you should definitely should have the video files hostes on a web file system rather than in a Notes db. An approach that we use in that case is to host video files and images in a Notes db, but then have an agent run to extract those files to the Domino server's file system. That way, end users can upload the files to the server's Domino/html folder without having to go through IT to get it done.

3David Marko  02/14/2014 1:45:26 AM  Serving HTML5 Video from Domino

We use this { Link } to achive compatibility with older browsers. Videos are also stored in Notes database.

4Patrick Kwinten  02/25/2014 4:20:10 AM  Serving HTML5 Video from Domino

I have uploaded a project on OpenNTF where I use use a video player:

{ Link }

Uploading large video files goes well, especially via the Notes client (hurrah! it is good at something).

Opening an attachment in Notes document should not be a problem, the video will only display as a progressive download, not as a streaming video. In case that is not a requirement...

5Michael Brown  05/03/2014 4:53:46 AM  Serving HTML5 Video from Domino

@David Marko,

Belated thanks for the video.js link. It rocks!

We're using it in production on our company intranet now.

About