What's the best way to swap embedded Quicktime movies on a web page?

January 9, 2006 9:42 AM

What's the most effective and broadly compatible way to swap embedded Quicktime movies on a web page? I've written my own JavaScript to do so, but it doesn't work on certain (a minority of) browsers, and it's a bit slow. Does anyone have experience doing this?

See my first attempt here. When the page is loaded for the first time, the banana should be shown. When a button is clicked, the video in question should start playing. When the other button is clicked, the first video should be replaced by the second, which should start playing from the beginning. This works on most browsers, but doesn't work on at least Safari 1.0 (though Safari 2) is fine. I'm not worried about IE5 and the like, but using Javascript and Quicktime is so complicated that I need to be confident that I'm using a method that will work crossbrowser.

What my current script does (it's easy to read in the source if you want to):
1) The DIV that the Quicktime embed is in starts with its CSS visibility set to hidden. When a link is clicked, it's set to "visible".
2) Using the SetURL method recommended by Apple in the Javascript Scripting Guide to Quicktime, the URL of the embed is changed to the new video's URL.

Unfortunately, some browsers are happier about doing this than others -- until I added some delays, I had reports that on some computers running IE6 (but not all), the video stage would appear but not change URLs, which suggested to me that the script was getting ahead of itself, but I added some delays. Still, Safari 1.0 doesn't seem to respond to SetURL() at all (speaking of which, is there somewhere I can find a copy of Safari 1.0 that will run under Tiger?), and the delay is still really just a kludge.

Anyone have an ideas for a better and more reliable way to do this that wouldn't require changing layout of the page? (I'm committed to having that video area swap in and out.) I'd much appreciate it -- thanks!

posted by tweebiscuit to computers & internet (9 comments total)

Could you use the DOM functions (ie createelement and appendchild) to "swap" (remove one video and then add a new video object?).
posted by null terminated at 10:15 AM on January 9, 2006

That might be a better solution -- the downside is that if I create five embed elements, each of which has a video and is set visibility:hidden to start, all five videos will begin loading in the background when the page opens, which is a bandwidth hit I can't take. Unless, of course, I continue to use SetURL, which appears to be my problem.
posted by tweebiscuit at 10:39 AM on January 9, 2006

You cannot interact with Macromedia Flash Player, Windows Media Player 9, or any other plug-in via Javascript in Safari 1.0 (or, to the best of my recollection, any Mac browser.) This sad fact has caused me countless hours of torment over the past few years.

The only exception to this rule seems to be QuickTime 7 on Safari 2.0, and Safari 2.0 is only available for Tiger.
posted by Danelope at 10:43 AM on January 9, 2006

My suggestion: Create an IFRAME, the source of which is a dynamically generated page that writes the OBJECT tag. The Javascript on your main page simply document.location.replace()s the IFRAME, passing a video ID, and that ID is associated with a particular video URL.

Don't pass the URL itself via the query string; that scenario allows anyone to play any content via your site, opening yourself up to whatever cross-site scripting vulnerability happens to be popular that week.
posted by Danelope at 10:47 AM on January 9, 2006

Crap. That sucks! And is particularly strange, since Apple doesn't mention this in their Javascripting-for-Quicktime guide -- and, of course, since Safari is a goshdarn piece of Apple software!

I suppose the next-best solution would be to make five hidden DIVs that contain Quicktime splash-images using the src="image" and qtsrc="movie.mov" method -- but that would require users to click twice to view each video (once on the button, once on the stage area to the right of the buttons.) Is there another way to implement the one-click-to-start/swap-movie functionality I'm looking for so that it will be compatible with Safari?
posted by tweebiscuit at 10:49 AM on January 9, 2006

Hmm. That might be a little out of my league, Danelope -- what would you suggest the dynamically-generated page be generated with? And do you mean that the IFRAME itself would contain the embed?

Oh, wait, I think I see what you mean. If I did it nondynamically:

The links would link to document.location.replace(1.html), d.l.r(2.html), etc., where 1.html is an HTML file containing the appropriate OBJECT/EMBED? And presumably, the IFRAME would cause the QT embed to be included on the page? (I've never used an IFRAME before, but I'm sure I can figure it out.)
posted by tweebiscuit at 10:53 AM on January 9, 2006

tweebiscuit: if you had a function that was called when an image was clicked and then created the movie object with createelement in that function, the movie would only load when the specific image was clicked.
posted by null terminated at 11:29 AM on January 9, 2006

Danelope types "The only exception to this rule seems to be QuickTime 7 on Safari 2.0, and Safari 2.0 is only available for Tiger."

IIRC, Safari 2.0 has a full implementation of the Netscape-style plugin API which, in theory, means that if the plugin itself provides an API, Safari should be able to control it via Javascript. I suppose it could be the case that other plugin writers have not added this interface in their MacOS builds since there was no point until the Safari 2.x release—hadn't thought about that possibility until just now...

FWIW, I have been following developments in this area as the project I am tasked to is looking to provide UI controls via plugin/JavaScript instead of the painful overhead of downloading and running an applet (using QT4J—what a nightmare that would be). I haven't tested anything other than QT because that is the plug-in we are interested in ourselves.

Just wanted to clarify your otherwise correct assertion.
posted by Fezboy! at 1:13 PM on January 9, 2006

TMI/Derail warning...

I forgot to add that any online Apple-provided Quicktime documentation relating to QT4J or Javascript+QT is largely out of date / deprecated as Apple broke backwards compatibility for bunches of stuff at QT6 (or was it 4.x?) and have not cleaned up the now-irrelevant information. The 3rd edition of QuickTime for the Web is pretty good though and the O'Reilly's QT4J Developer's Notebook is the only non-dated QT4J reference out there (other than the listserv I suppose).
posted by Fezboy! at 1:25 PM on January 9, 2006