Update March 27, 2012: I penned this article waaay back in 2010, before I’d discovered John Dyer’s excellent MediaElements.js script, which renders my blog post moot. Please consider this information ephemeral and possibly a PHP user-agent sniffer tutorial at best.
I never dreamed that I’d be writing an article with a title like this. Well, I recently worked on a project where I had to embed a locally-hosted video onto a web page that the client wanted to be able play on “any” PC as well as on an iPad or iPhone. Easy enough, right? My first thought was to Dive into HTML5, but, with limited current browser support, HTML5 alone wasn’t going to be an option for PC users. My favorite container for embedding video has always been the Flash-based Flowplayer, which does actually provide a fall-back option for users on iOS devices by allowing you to display a splash image that links to your MP4 (required format) video file.
I won’t go into too many specifics about installing or configuring Flowplayer here, but below is the basic markup for embedding the player, which is accomplished by attaching an ID or class name to an href (which the Flowplayer JS uses to identify the embed location) as so:
<a href="path/to/video.mp4" id="player">
<img src="splash-image.png" />
</a>
As you can see, the HTML is pretty straightforward. On an iOS device this markup would predictably display the splash image as a link to the video file. An iPad or iPhone user could touch the image which would cause QuickTime to launch and play the video.
I wanted to find a solution that would allow me to try out some HTML5 while also maintaining the highest level of compatibility—albeit using Flash. In the end I decided to create two different pages: one with the Flash-based Flowplayer that I would serve up to PCs (and Android devices) and one using the HTML5 <video> tag that I would serve up to iOS devices.
I first created a PHP page called index.php and included a script at the top to determine the USER_AGENT. I found a simple PHP script to do just this on David Walsh’s Blog, which is shown below:
<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))
{
header('Location: http://www.logicalthings.com/ipad-test/index-ipad.html');
exit();
}?>
A similar redirect could also be achieved using an .htaccess method, but David’s PHP solution suited me fine. Oh, and I chose to sniff out the iOS devices since they represented the minority of possible USER_AGENTs and thus required less code.
For the rest of the page, I included all of the basic XHTML elements, the necessary jQuery and Flowplayer JS links, the Flowplayer embed code and finally some JS to configure the player. Here’s the rest of the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPad HTML5 Video Test - Flash Player</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- INCLUDE JQUERY & FLOWPLAYER JS -->
<script src="js/jquery-1.4.3.min.js"></script>
<script src="js/flowplayer-3.2.4.min.js"></script>
</head>
<body>
<p> </p>
<!-- PLACE FLOWPLAYER PLAYER ON PAGE -->
<a id="player" href="video/video.mp4"></a>
<!-- CONFIGURE FLOWPLAYER PLAYER -->
<script type="text/javascript">
$(function() {
var player = $f("player", "flash/flowplayer.commercial-3.2.5.swf", {
// SPECIFY SOME FLOWPLAYER PARAMETERS
clip: {
url: "video/video.mp4",
onFinish: function() { this.stop(); },
autoPlay: true,
autoBuffering: true,
scaling: "orig"
}
});
});
</script>
</body>
</html>
I specified the dimensions of the embedded player (id=”player“) as well as the page background color in my stylesheet (style.css):
body {
background: #000;
margin: 0;
padding: 0;
}
/* the video block */
#player {
display: block;
height: 480px;
width: 640px;
margin: 0px auto;
}
The next thing I did was create the page for the redirected iOS devices, which I called index-ipad.html. This would be the easiest part of the project and would basically come down to the <video> tag and a couple of attributes. Notice I reused the same ID of “player” to specify the dimensions of the video player and to center it on the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iPad HTML5 Video Test - HTML5 Player</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p> </p>
<!-- PLACE VIDEO PLAYER ON PAGE -->
<video src="video/video.mp4" controls autoplay id="player" />
</body>
</html>
Not to take anything away from Flowplayer, but clearly this is the more elegant solution. I probably learned more than I wanted to about video on the web from the Dive Into HTML5 page of the same name. But Dev.Opera’s Everything you need to know about HTML5 video and audio page proved the most helpful and is now my go-to reference on the subject.
Now I just needed to test it out to make sure the correct page was being displayed to the user. Here’s a link to my test page, having swapped out the client’s video with one I shot in New Orleans a while back:
Oh wait, I don’t own an iPad nor did the project’s budget provide for my purchasing one. Enter YouTube user, Sean, who shows off the most useful feature of Safari I’ve seen to date: Switching the USER_AGENT to emulate an iPad or other browser/device. To do this you first have to enable the Developer menu in Safari’s Advanced Preferences. Then, it’s just a click away:
Now, while this “hack” definitely fooled my USER_AGENT php sniffer, it’s not exactly what I would call an iPad emulator. For starters, the <video> tag’s autoplay attribute worked for me in Safari in iPad USER_AGENT mode, but not always on an actual iPad. How do I know this? Because several members of the WordPress-Austin list who own iPads were kind enough to do some user testing for me. Their reports indicated that autoplay was hit or miss–likely due to variations in iOS versions. Ultimately, the client was happy enough to see the poster frame of the video superimposed with the default Play button on their iPad and for the video to actually play when touched. So I stuck a fork in it.
I didn’t do a whole lot else in terms of testing since there wasn’t a whole lot else going on with this simple, embedded video. But, the exercise proved to be a great learning experience and left me excited to take on some more HTML5 in my upcoming projects, which will likely begin with HTML5 Reset.
Thanks to Paul, Jim, Jenaro and Ike for their help with the testing. I welcome any constructive comments, questions or suggestions.