Getting HTML5 video to work with iOS Mobile Safari

I’ve been researching issues regarding serving HTML5 video content to iOS devices this past week. Here’s an outline the issues and some concise answers as to how iOS Mobile Safari 6 will handle HTML5 video. This post won’t touch on video encoding.

Mobile Safari’s QuickTime component does not handle HTTP requests the same as it does normally, say for a web page. Instead the requests for this content are restricted.

HTTP Content-Type Header

This is fairly obvious, but set a content-type in the HTTP response to video/mp4.

HTML <video> Element

Also obvious. Requires the controls attribute to be set.

HTTP Range Header

Mobile Safari is an HTTP/1.1 client, and supports the Range header. It expects video content to be split into a byte range. This makes sense for mobile devices.

Drupal is not the best HTTP provider for private files out of the box (though the new Symfony2-based Kernel looks promising). It does not support Range. Apache natively supports this, but if you’re trying to restrict access to content, then you must go through Drupal’s bootstrap.

This problem is solved by the Resumable Download module. Resumable Download modifies Drupal’s native behavior for private files, and appropriately responds with 206 or 413 HTTP responses. There are also a couple alternatives listed on the project page.

HTTP Basic Authentication

Mobile Safari’s video requests do not support HTTP Basic Authentication. You will notice in access logs that the request to the HTML content is done via basic auth, but further requests for video content is done without it.

Okay, that’s not so bad I guess although I do not understand why you would limit your HTTP/1.1 client for one request and not the other.

HTTP over SSL (HTTPS)

Mobile Safari requires¹ that² a web site publishing HTML5 video content have a trusted certificate with an Intermediate CA. This means that Mobile Safari will not play video provided by web servers with self-signed certificates (e.g., development/staging servers that use SSL).

Conclusions

If you want to test your HTML5 video-providing web site on an iOS device, then my recommendation is that you:

• Do not use Basic Auth or SSL on your development & Q/A environment. Rely on VPN or Firewall restrictions:
  • This will increase maintenance burden, especially for firewall and VPN restrictions.
• Pay money for a signed certificate:
  • This will increase costs and maintenance burden depending on the server infrastructure.
• Use Android or Chrome to do HTML5 video testing and create a quick platform test.
  • This requires that you trust HTML5 markup and content delivery will be the same between a test page/platform and the real thing. If you cannot trust this, then you need to either figure out why or mirror everything.
• If using Drupal, serve things out of public files or use the module above.

If you do anything else, you’re out of luck.

Matthew Radcliffe is a Drupal developer at Kosada, Inc. and contributor to the Drupal project including Drupal core, contributed projects, development environments and the Contribution Mentoring program among other things.