News for the ‘9-5’ Category

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.

WordPress VIP conference

Attending the VIP WordPress conference held by Automatic in Napa, California. Great presentations with high level topics ranging from security, plugin architecture, performance to debugging and wp-cli.

Posted: May 15th, 2013
Categories: 9-5
Tags: ,
Comments: No Comments.

BGB hockey site launches

I put together a new website for my hockey team BGB. I was recruited to play for a new team at Chelsea Piers in New York. It is a division IV league with a high tempo and fast pace!

Seeing as our team is in its infancy (compared to most of the other teams in the league who have been playing together for 5+ years), I decided to put a site together to help build camaraderie, through player profiles and an aggregate of news, pictures, videos and thoughts.

Posted: March 25th, 2011
Categories: 9-5
Tags: ,
Comments: No Comments.

Atari: Project Runway for the Wii

Last month, I was contacted by Atari games to come in and help put together a promotional website for their recent title release ‘Project Runway‘. To read more visit the portfolio page.

Posted: December 23rd, 2010
Categories: 9-5
Tags: , ,
Comments: No Comments.

liz-osborn.com now live!

I recently helped set up an actress’s website, (who is based out in L.A.). The site is rather straightforward, with a clean and easy to use interface. While it may not look like a lot on the surface, there is a bunch of technology that is being used under the hood.

  • jQuery (image roll over and contact menu)
  • PHP (email script, header)
  • JavaScript (used to embed the flash video)
  • HTML (base code for the site)
  • CSS (styling to manipulate the size of the font, as well as placement of imagery)
  • Flash/AS3 (used for the video player and mp3 player)
  • Apache MOD-rewrite ( allows for a clean looking URL, as well as cleaner server side markup and folder structure)
  • Google Analytics (for stat tracking, and user reports)

While the above mention of coding languages used may seem irrelevant, I wanted to point them out so you are aware that I am up to date with the latest and current technology trends. Please feel free to view the site here:
www.liz-osborn.com
and you can view her original site, prior to me being brought in here:
www.liz-osborn.com/0

Posted: September 22nd, 2010
Categories: 9-5
Tags: ,
Comments: No Comments.

Grand Theft Auto: Chinatown Wars

First release for R* on the Nintendo DS. Worked long and hard, but it was worth the wait. The game is finally here! [Grand Theft Auto: Chinatown Wars Box Art] Here is the latest trailer: I plan to upload a picture of my name in the credits soon!

Posted: July 22nd, 2010
Categories: 9-5
Tags: , ,
Comments: No Comments.

Latest

My latest work includes updating rockstargames.com/IV for Flash detection. I enabled the site to use not only a browser Mobile Detection, but as well as browser detection. What that means is when a user goes to rockstargames.com/IV and their browsers either does not have flash installed, or enabled, the mobile detection kicks in and re-directs the user to the mobile site. Tutorial to come.

Posted: July 1st, 2010
Categories: 9-5
Tags:
Comments: No Comments.