A list of findings/issues for HTML5 video, updated when I have time. Last updated: 8/6/13

html5-video-fun.md

##HTML5 Video Fun

Implementing cross-platform HTML5 video is actually less fun than you think.

Summary Resources

The following are good resources for general HTML5 Video info:

• http://diveintohtml5.info/video.html

Video Encoding

• Command line tool: http://paulrouget.com/e/converttohtml5video/
• Good summary of codec support: https://app.zencoder.com/docs/guides/encoding-settings/html5
• Specific encoding settings for mobile support: http://blog.zencoder.com/2010/09/30/how-to-encode-video-for-mobile-use/
• TLDR; You need: Minimally, MP4 (H.264) + either WebM or Ogg, or maybe both. High-profile MP4 won't work on older phones.

Nice "Feature", Bro

• IE doesn't fire click events on a video element.
  • If you try to use mousedown or mouseup handlers on the video tag, any user clicks on any of the default controls will be absorbed/lost and the controls become blocked (in most browsers).
  • So, if you need to just know when a user has interacted with the video using the default controls (say, in order to stop auto-rotation in a carousel), you have to resort to something like this: video.on('play pause seeking volumechange webkitfullscreenchange mozfullscreenchange', function(){…});
  • IE apparently does not have an event for the fullscreen action. That I could find, anyway.
• There is no way to return to the poster view (from attribute poster) after the timeline of the video has changed. So if the poster is something other than frame zero of the video, you'll never return to that view again after the video timeline has changed for any reason.
• There is a known but unaddressed bug in webkit where if you have two requests open for the same video file on the same page (or in different open tabs), the requests will get blocked and video will never load. So if your carousel uses any mechanic involving duplicating slides to achieve an infinite view, causing a duplicate video file request, that video will break. Or, if you have the same page open in multiple tabs, only one tab will load videos at a time.
• In mobile Safari, if you move a dom node that has a video in it after the video has initialized, you will lose all default video controls and won't be able to play the video.
• IIS returns a '404 not found' error if it doesn't have the MIME-types to support a video type, instead of returning a file-type error
• Closed Caption support is still kinda iffy - It has been supported in Chrome and IE10, and just introduced in Safari for desktop, but is still not supported on mobile Safari, Android, IE9 or Firefox.