Detect H264 profile and level for HTML5 video

Question

I have a bunch of mp4 files that are all video encoded with H264 High profile level 4.x. We want to display them with HTML5 video for cross-device delivery (from phones to connected TVs). I am aware that theses files may not play well on all devices especially the older ones so we are considering alternatives (like displaying a warning message for the user or creating baseline renditions for the files). I need to check in JavaScript if a given device can read a given H264 profile and level and I am not sure how it works exactly.

I have read http://diveintohtml5.info/detect.html which provides a function as follows

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}  

This tells me about H264 baseline profile - how to detect H264 High profile level 4.1 for example?

Answer 1

During my researches on HTML5 video and mime type I found this link from whatwg.org. It says:

Video Codecs

H.264 Baseline: avc1.42E0xx, where xx is the AVC level
H.264 Main: avc1.4D40xx, where xx is the AVC level
H.264 High: avc1.6400xx, where xx is the AVC level 

XX is expressed as an hexadecimal value. So level 3.0 is 1E as in your example.

If you want to test against H264 High profile level 4.1, the mime type to test would be avc1.640029. You can use the function from diveintohtml5.info to test your mime type.

On a side note if you want broad devices coverage you may be better off generating only one H264 main profile rendition for each file as it will play on most common devices (this is how I do it as of today unless I have a device-specific requirement).