How to make video iPad, iPhone and iPod touch compatible with JavaScript, Flowplayer & HTML5--Internet--Tools & Tips for Multimedia Designers--Planet
Making your website video iPad friendly with JavaScript and HTML5
The iPad is a great device to watch video. According to newteevee.com, iPad users watch 3 times as much video as regular web users.
I can attest to that, I’d much rather watch movies on my iPad than on my iPhone, my laptop or…gasp…my TV. It’ also a great way to enjoy web tutorials since it frees your laptop’s screen to completely follow along with a tutorial.
Unfortunatelly, the excellent flowplayer, the video player I’m currently using, is a flash based player and Steve Jobs is not having any of that on his iPad. HTML5 is a good solution, but managing between the Flowplayer and HTML5 takes a bit of wrangling.
You might be thinking that it would be great to just use HTML5 for all of the videos, but it’s not supported by Internet Explorer 8, so until that happens we need a workaround. Luckily FlowPlayer can work in any browser as long as it has a flash plug-in, which means we can use it for everything except for Apple’s Mobile Devices and take care of those using HTML5. If you’re interested in HTML5, check out the excellent guide by Mark Pilgrim.
In the meantime you can use this technique to make sure your video plays on the iPad, the iPhone, and the iPod Touch, as well as in other browsers.
Step 1: Download & Install FlowPlayer
Download Flowplayer, and follow the installation instructions
It’s a pretty straighforward installation. When you download the files, you’ll get several files. You’ll need a file called flowplayer.controls-x.x.x.swf, another file called flowplayer-x.x.x.swf, plus some JavaScript flowplayer-x.x.x.min.js. Where x.x.x is the version of Flowplayer.
Copy the files to the server and note their location.
Step 2: The JavaScript
When you want to play the movies on your pages, you’ll need two pieces of javascript:
Part 1: The JavaScript Calls
<script src="LOCATIONOFFLOWPLAYERJS" type="text/javascript"></script>
<script type="text/javascript">
function playhtml5movie(h5moviesrc,h5width,h5height) {
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
document.write('<video src="'+h5moviesrc+'" width="'+h5width+'" height="'+h5height+'"controls ></video>');
} else {
document.write('<a href="'+h5moviesrc+'" style="display:block;width:'+h5width+'px;height:'+h5height+'px" id="player"></a>');
flowplayer("player", "LOCATIONOFFLOWPLAYER", {
clip: {
autoPlay: false,
autoBuffering: true
}
});
}
}
</script>
Adjustments/Notes
- The first line of code calls the javascript file that you downloaded from the flowplayer site. Change the LOCATIONOFFLOWPLAYERJS to the url of where you placed the javascript code.
- The next part of the code is a function that checks to see if the device viewing the page is an iPad or it’s cousins, the iPhone and iPod touch. If they aren’t, it displays the flowplayer, otherwise it gives those devices HTML5 code for playing video.
- Substitute the word LOCATIONOFPLAYER with the URL of where you placed the flowplayer.
- You only need to have this code once per page. You can include this code in your
<head>tag or put it (without the<script>tag in my javascript.js file which I include into all my pages automatically.
Part 2: The JavaScript call
<script type="text/javascript">
playhtml5movie('LOCATIONOFMOVIE',MOVIEWIDTH,MOVIEHEIGHT);
</script>
Place this anywhere you want to play a movie. Obviously, LOCATION OF MOVIE is the URL of your movie. MOVIEWIDTH is the height of your movie and MOVIEHEIGHT is the height. Make sure you update those parameters.
Step 3: Encoding your movie
Because we want this movie to also work with Flowplayer, which is flash based, the only format we can use for this is .h264. It’s really the best format to use because it will work with most players.
I’ve used a variety of applications on both Windows and Linux based systems.
Windows:
- Format Factory
- XviD4PSP
- Handbrake
- FFmpeg
- mplayer