Server-side Feature Detection

In Anders Andersen's (@andmag) recent post, Responsive embeds + RESS, he closes wondering if feature detection could be used to "responsively" include the video element in a web page. Taking up that challenge I was curious to see if Detector could handle this example. If Detector supported a Flash test I'd feel a little better about the results but it should work out ok.

HTML5 Video Test

The following example is using Detector's HTML5 video profile for the requesting browser. So if your browser supports the <video> tag and WebM or H.264 a video should be playable below. Detector doesn't currently support a check for a Flash player so for other devices you'll simply get an ugly link to the video on YouTube. If Detector did support that check then I could fall back to the old embed code first and then fall back to the ugly link.

Your browser doesn't appear to support HTML5. Check out the video on YouTube.

The Code

After including the Detector lib at the top of the script this is the very simple switch that can be included in your code:

if ($ua->video->h264 || $ua->video->webm) {
      print $html5Embed; // YouTube's <iframe> code
} else {
      print $simpleLink;

Easy peasy.

About Detector

Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

Detector dynamically creates profiles using a browser's (mainly) unique user-agent string as a key. Using Modernizr it records the HTML5 & CSS3 features a requesting browser may or may not support. ua-parser-php is used to collect and record any useful information (like OS or device name) the user-agent string may contain.

With Detector a developer can serve the appropriate markup, stylesheets, and JavaScript to a requesting browser without being completely dependent on a front-end-only resource loader nor a browser-detection library being up-to-date.

Check out the README for more information as well as the full list of features.

Get the Code



More Information


Detector is based on Modernizr, modernizr-server, and the browser-detection library ua-parser-php. It also benefits from a healthy dose of inspiration from Yiibu's Profile.

Share This


The following 13089 user agent profiles are already in the system (readable list):