Web Video Hack: Many Movies, One Player

By David Battino
August 12, 2009 | Comments: 7

In “QuickTime Web Movie Secrets,” I shared a JavaScript-and-CSS method to play multiple QuickTime movies in the same area on a webpage. Clicking a text link opened the corresponding video inside a DIV. The links contained a JavaScript function call that passed the movie’s URL, height, and width to Apple’s QuickTime embedding script, AC_QuickTime.js, and then inserted the result in the target DIV with the innerHTML method.

At the time I wrote the article, clicking a second link while a movie was playing caused the second movie to start playing simultaneously, which was annoying. Apple seems to have fixed this behavior in newer versions of QuickTime, but several readers asked if there was an even easier way to open multiple movie links in one “stage.” They also wanted to use thumbnail images instead of text links.

Here’s a super-easy hack I found. It doesn’t even use JavaScript, just an iframe for the player area and a target attribute for the links. Consequently, there’s no QuickTime detection, so visitors without QuickTime (or whatever codec your media file requires) may get unexpected results.

On the plus side, this technique seems to work on the iPhone. (One quirk is that the browser jumps back one page after playing the movie.) Let us know in the comments how it goes for you. Click a number to start:


Movie 1Movie 2Movie 3

Code for player: <iframe width="188" height="152" frameborder="0" marginwidth="0" scrolling="No" marginheight="0" id="stage" name="stage" src="curtain136.jpg"></iframe>

Code for buttons: <a href="movie1.mov" target="stage"><img src="poster1.gif" alt="Movie 1" width="40" height="34" /></a>

Note: The actual movie size is 160x120 pixels. Adding 16 to the height to account for the QuickTime controller bar makes that 160x136. However, Safari centers the movie vertically before drawing the controller, cutting off the bottom. Therefore, I padded the frame to 188x152 to create a border.


You might also be interested in:

7 Comments

Thank you so much for this! This is exactly what I was looking for. Question though, regarding:

"there’s no QuickTime detection, so visitors without QuickTime (or whatever codec your media file requires) may get unexpected results."

I understand that we are using an iFrame holding the clients QT player (if they have it) but if the user has no quicktime installed is there a way to add a detection or some sort of fail over in place? Any info will help. Thanks again!

@Percival: I believe the Apple JavaScript provides QuickTime detection. Check out Pageot and Stampot in the QuickTime Web Movie Secrets article as well.

If you are using an iframe, you can load in a whole new page that contains just the movie. That way you can include fallback flash versions for other users and also use HTML5 tag too, for users of safari.
You do get a problem though; When the iframe loads there's a momentary white flash before the movie/poster displays. This is regardless of bg colour, transparency etc. (it's been driving me nuts for days!). Apart from that it's a reasonably good way do this. I also found this way of doing it with javascript:
http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding

Which, although it focusses on embedding youtube etc. works perfectly well for local movies.

Thanks for your articles. I've learned a lot from them :-)

Roger: Thanks for the ideas! The Hunlock page is very clear and useful as well. I've been playing with the HTML5 audio and video tags; it'll be great when they have more support.

When I try this method, both safari and firefox try to download the movies rather then play them in the player. Am I missing something? I also tried the method listed on the hunlock.com link, which works great in safari and firefox, but does not seem to compatible with IE. Any suggestions?

Hi Dave. Your videos may be downloading because that's the way your browser is configured to handle QuickTime.

Recently, I used the innerHTML approach to make the video player at RocketLife.com. I initially tried using CSS display switching, but it didn't work in all browsers. The RocketLife player currently has just one video link, but it works with multiple links as well. I'm using it for YouTube videos; I haven't yet tested it with QuickTime embedding code.

Thanks Dave! You really helped me out here!

News Topics

Recommended for You

Got a Question?