Posts Tagged ‘iOS’

HTML5 Video and Detection for iOS

I recently was tasked with looking into why an HTML5 video player was not working within application browsers on the iOS platform. There is nothing wrong with the HTML5 video player firing up and working in the native web browsing app, Safari. A co-worker wrote a nice snippet to parse the user agent for key words.

//Regex pattern /iPod|iPhone|iPad/i
/iphone|ipad|ipod/i.test(window.navigator.userAgent)

The above code is doing a few things:

  1. regex pattern: /iphone|ipad|ipod/i where the ‘i’ denotes that it is not case sensitive.
  2. .text(); A method that tests for a match in a string, in this case the regex object seen above.
  3. window.navigator.userAgent; grabbing the userAgent from the window{} in the DOM

This alone is great, and works flawlessly. However this breaks when using an embedded web browser with in and iOS application, such as Twitter, Facebook, Pinterest, Reddit, etc.. Here are 3 examples of the user agent strings that are passed in the headers.

  1. Safari App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A501 Safari/9537.53
  2. Twitter App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11A501 Twitter for iPhone
  3. Facebook App iOS7:
    Mozilla/5.0 (iPad; CPU OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11A501 [FBAN/FBIOS;FBAV/6.5.1;FBBV/377040;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/7.0.2;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBOP/1]

In the above examples, you will notice some differences. This is a very long string to test against. I have done some research and have seen a few examples of how to properly do iOS detection:

//Another method without using Regular Expressions:
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false ),
    iOSversion = false;

if( iOS ){
    iOSversion = ( !!window.history && !!window.history.pushState ? '4+' : '4-' );
    if( !!window.matchMedia ){ iOSversion = '5+'; }
}


//Similar to what my co-worker did.
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );


All the above work, however they do not work for embedded browsers. I was investigating the navigator object when I saw two that struck out at me:
navigator{}

Navigator {
appCodeName: "Mozilla",
appName: "Netscape",
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36",
cookieEnabled: true,
doNotTrack: null,
geolocation: Geolocation,
language: "en-US",
mimeTypes: MimeTypeArray,
onLine: true,
platform: "MacIntel",
plugins: PluginArray,
product: "Gecko",
productSub: "20030107",
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36",
vendor: "Apple Computer, Inc.",
vendorSub: "",
webkitPersistentStorage: StorageQuota,
webkitTemporaryStorage: StorageQuota,
__proto__: Navigator}


The two objects that struck out at me were:

  • vendor: “Apple Computer, Inc.”
  • platform: “MacIntel”

I had to rule vendor out, because that would be the same when using desktop Safari Browser. The platform however, changes and is specific to the device you are using:

  • platform: “MacIntel”
  • platform: “iPad”
  • platform: “iPod”
  • platform: “iPhone”

So the simple elegant solution to resolve the HTML5 video issues in embedded browsers of iOS applications was to run the test against the platform object and not the userAgent.

//Regex pattern /iPod|iPhone|iPad/i
/iphone|ipad|ipod/i.test(window.navigator.platform)

Posted: October 11th, 2013
Categories: 9-5, code, Info, tutorial
Tags: , ,
Comments: No Comments.