How to Embed Movies in a Web Page for the iPhone

This page shows you how to embed movies and other media in web pages, so they can be viewed on Macs, PCs, or iPhones. This technique will work on any iPhone, any Mac, and any PC that has either QuickTime or iTunes installed. Windows users who don't already have QuickTime will be prompted to download it (it's free).

The iPhone is a little different from a Mac or PC. It plays movies and sounds in full-screen mode, not in a browser plug-in, so a web page with an embedded movie has a dark grey rectangle with a play button on it where the movie should be. I'll show you how to avoid that.

The iPhone plays audio and video; other media, such as sprites, Flash, VR, text, or QT effects, should not be used. You can export your movie as an MPEG4 file and be sure that it will play on the iPhone. (See Part One: Compressing Video for the iPhone)

Your web page can distinguish the iPhone from other browsers by looking at the navigator.userAgent property in JavaScript.

The best way to embed a movie for everyone, including iPhone users, is to do this:

  1. Export an MPEG4 version of your movie. (In most cases, you should export two versions--one for a WiFi connection and one for the EDGE cellular data connection, then make a reference movie so the right one plays automatically. See Preparing Video for the iPhone)

  2. Embed the best version of your movie in a web page, as usual. It's okay if it uses media that the iPhone doesn't support, or is too big for the iPhone screen.

  3. Link to the page with the embedded movie using a JPEG or other image, taken from the movie. That way the link looks like your movie in all browsers, including the iPhone.

  4. Use a line of JavaScript to check the navigator.userAgent for "iPhone" in the page that contains the embedded movie. If it's an iPhone, replace the url of the page with the url of the MPEG4 version of the movie. (See the example below.)

By the way, you should embed your movie in the web page using the JavaScript file available from Apple: AC_QuickTime.js. You can download it from http://developer.apple.com/internet/licensejs.html. It's free, it works great, and it makes your life easier.

Okay, the link to the embedded movie page looks like this:

<A HREF="MyMove.html">
<img src="MoviePoster.jpg" alt="image links to MyMovie">
</A>

And the page with the embedded movie looks like this: 

<html>
<head>

	<script src="AC_QuickTime.js" language="JavaScript" type="text/javascript">
	</script>

	<title>My Movie Rocks</title>


	<script language="javascript">
	var ua = navigator.userAgent ;
	if (ua.indexOf("iPhone") > 0) document.location.replace("MyMovie.mp4");
	</script>


</head>


<body>

	<script language="javascript">
	QT_WriteOBJECT('MyMovie.mov', 'Width','Height+16', '', 'autoplay', 'true');
	</script>

</body>
</html>

It's really pretty simple, but let's review it:

Include AC_QuickTime.js from Apple to write the object and embed tags for you.

Read the navigator.userAgent into a string and look for "iPhone".

If it's an iPhone, replace the document's URL with the URL of your MPEG4 movie at roughly 480 x 320.

Then embed the regular movie by calling QT_WriteOBJECT, passing the movie's name, the width, the height (adding 16 for a controller), two single quotes with nothing between them (don't ask), and any parameters you want to pass as name/value pairs, such as 'autoplay','true'.

A Page with Movies for the iPhone

Here's an example page that links to two full-screen (1280 x 720) movies with QuickTime blend effects for Macs and PCs, with 352 x 288 MPEG4 video versions for iPhones. Viewers don't need to do anything special to choose which version they get, they just click a JPEG:

http://homepage.mac.com/qt4web/sunrisemeditations/iphonesunrise.html

As you can see, the iPhone version of the movie is smaller, and lacks the blend effect, but it's still quite nice.

A Page with a Multi-Datarate Reference Movie

Here's a second page with an html slide show with blend effects and background music. The iPhone's browser doesn't play background music, so once again we redirect iPhones to an MPEG4 version of the slideshow. But in this case we use a reference movie that loads a higher resolution version of the MPEG4 if the iPhone has a WiFi connection and a lower bitrate veersion if the iPhone is on the slower EDGE network.
Lake Merritt Sunrise

If you load the above page from a Mac or PC, you will see a full screen slide show with music. Load it from an iPhone with a WiFi connection, and you will see an MPEG4 movie. Turn off the WiFi connection and fall back to EDGE, and loading the link will show you a very small movie that can load and play quickly over EDGE.

Troubleshooting

If you tried following the instructions on this page, and they didn't work, here are some things to check:

Just checking...

Home