Home » Tips & Tools

Embed Video in Web Page for iPhone

One Comment

By Steven Gulie

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 here. It’s free, it works great, and it makes your life easier.

Okay, the link to the embedded movie page looks like this: iPhone users Just click on the picture

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:

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:

  • Did you replace MyMovie with the name of your movie and your MP4, in both places?
  • Did you replace Width and Height+16 with the actual width and height (plus 16) of your movie?
  • Did you download AC_QuickTime.js from the Apple website and put it in the folder with your HTML?

Similar Posts:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

One Comment »

  • Jay said:

    Ow, my head hurt from so much great content.
    Keep up the great job Brian.

Comments or additional questions?
Leave your response here

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

The dvshow.com is Gravatar-enabled. To put a face to your comments, get your own globally-recognized-avatar at Gravatar.