QuickTime objects and IE6
March 7, 2005 6:07 PM   Subscribe

I am searching for help in dethroning a QuickTime object from the authority it has been given by Internet Explorer 6.

( I have requested assistance from a number of internet message boards, though what I thought had a simple solution appears to not to have one that is easy to come by. )

I have a page, and in the middle there is a QuickTime object in the form of an audio file ( an MP3 ). There is content above the QuickTime object, and there is content beneath it. When Internet Explorer 6 reaches the QuickTime object while parsing the markup, it stalls loading everything below until the audio file has finished loading. Because this MP3 might weigh as much as 2Mb, the page must sit half completed until the QuickTime object has been completely downloaded, at which time the remainder of the markup is presented.

Safari, OmniWeb, Firefox, Netscape, et al, behave in a way that I would consider 'proper', that being that the page is loaded around the QuickTime object, so that the markup is completely loaded, regardless of the MP3's download status. Would any one know of a trick to have Internet Explorer behave in a similar fashion?

I would be extremely grateful for any help one may offer.

I have an example ready upon request.
posted by tenseone to Computers & Internet (16 answers total)
 
Frame? Iframe?
posted by orthogonality at 6:47 PM on March 7, 2005


Could you put the QT into a layer, and the rest of the page into another layer? Like
(layer1) everything else(/layer1)
(layer2 corners = foo)html for QT object(/layer2)
posted by trondant at 7:42 PM on March 7, 2005


Response by poster: Thank you for your response!

Unfortunately, I do all my work with the XHTML1.1 DOCTYPE, so using an iframe is not an option.

I'm not sure what you mean by 'layers' exactly. I have tried putting a really high z-index on the object with the hope that containers with a lower z-index would be drawn first, but I didn't quite work out as I had hoped. In fact, I wouldn't be surprised if my concept of the z-index property is completely flawed.
posted by tenseone at 7:50 PM on March 7, 2005


does changing the order in which the mp3 appears in the markup make any difference?
posted by juv3nal at 8:10 PM on March 7, 2005


tenseone,

Look here under the section titled 'Layering Elements'. My general idea was that if you could control the position absolutely, all the other content on the page could come before the section in your file with your QT object. HTH.
posted by trondant at 8:12 PM on March 7, 2005


Response by poster: Yes, changing the order makes all the difference. I have experimented with having the object fall last in the markup, and absolutely postioning the content beneath it, in effect 'fooling' IE6. Though I must say that this created a nightmare for me, presentation wise, as it was only one section of a dynamically created page that needed to be treated as such. I was hoping that there was a way to have IE6 flow around the object without causing mayhem for the rest of the website.

In production the QuickTime object is the product of a method call to a PHP5 class, which assembles the markup and tosses it back. The class is not responsible for the content above or beneath the QuickTime object, save a bit of information about the MP3 above, and a form to load a new MP3 below.

I hope that makes some sense. I am not trying to duck a difficult situation by deciding against postioning content beneath the object, I am attempting to avoid having to rewrite an entire class for this one isolated issue, which isn't the fault of the class at all.
posted by tenseone at 8:33 PM on March 7, 2005


Response by poster: Rereading what I wrote above does make it seem like I am ducking a difficult solution to a problem created by one web browser. Though it is really complicated, and if I can't find a way to have IE6 load the markup without regard to the state of the QuickTime object, things are not going to work.

I am seasoned in the field of IE6 work-arounds, and I am never one to complain about IE6's shortcomings. I just, well...boof, woof, woof.

I've been trying to work this out for so long that I am beginning to go mad. I apologize if I appear scattered, I was just hoping, hoping...
posted by tenseone at 8:48 PM on March 7, 2005


Couldn't you do something in JavaScript, i.e., set an onLoad method for the last element at the bottom of the page which will set the href (or what have you — I'm not entirely sure how the <object> tag works, if that's what you're using) to the MP3 only when it's loaded?
posted by IshmaelGraves at 9:09 PM on March 7, 2005


Response by poster: Yes, IshmaelGraves, yes. I have been looking at 'onload' but have no clue how it works, or how I would implement it. I have no experience with JavaScript other than copy-and-paste.

This the resulting markup for the QuickTime object:


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="100%" height="16">
<param name="src" value="/lark/45.mp3" />
<param name="controller" value="true" />
<object type="audio/mpeg" width="100%" height="16" data="/lark/45.mp3" class="mov">
<param name="src" value="/lark/45.mp3" />
<param name="filename" value="/lark/45.mp3" />
<param name="type" value="audio/mpeg" />
Error Error
</object>
</object>


Would there be a way to apply the onload event handler to that bit there?
posted by tenseone at 9:16 PM on March 7, 2005


tenseone, the thing to do would be something like:

<head>
<script lang="JavaScript">
function loadqt (qtname, filestring) {
document.getElementById(qtname).value = filestring;
// you might have to write this:
// document.getElementById(qtname).setAttribute('value", filestring);
}
</script>
</head>
<body>
...
<param id="param1" name="src" value=""/>
<param id="param2" name="filename" value=""/>
...
<!-- This is your last whatever in the markup -->
<p onLoad="loadqt ('param1', '/lark/45.mp3'); loadqt('param2','/lark/45.mp3');">
Lorum ipsum dolor sic amet
</p>
</body>


This is off the top of my head, and I haven't tested it (can't get to IE without rebooting anyway) and there are probably more elegant ways to go about it, but it should give you the general idea.

You might also check to see if properties like CSS visibility and display will affect the load order; it would be much easier to simply leave the value attributes as they are and write something like this:

<object id="qtobj" style="display: none;"... >
...
</object>
<p onLoad="document.getElementById('qtobj').setProperty('display', 'block');">
...
</p>


...which would cause the object to not display until the paragraph element was loaded.
posted by IshmaelGraves at 9:42 PM on March 7, 2005


Response by poster: Thank you, IshmaelGraves, thank you.

It feels quite wonderful to actually be moving forward rather than swimming in circles. Though if I encounter problems, would you be able to recommend a place to turn for additional help once this topic scrolls off the page?

I have tried toying with the visibility property, though IE6 still loads the QuickTime object even though it cannot show it. Although I just now realized that I had not played with its display. So thank you, again, for thinking of that.
posted by tenseone at 9:54 PM on March 7, 2005


Response by poster: Alright. Setting display does effect the, well, display with IE6. She does not get hung up with the object whilst loading the page with a container div's display set to none. I am in disbelief that I neglected to try this earlier.

Although, using the --


<div id="song" style="display:none;">
...
</div>

<p onLoad="document.getElementById('song').setProperty('display', 'block');">
...
</p>


-- does not seem to return the display back 'on'.

Would there be something I overlooked ( again )?
posted by tenseone at 10:41 PM on March 7, 2005


Response by poster: So I cobbled together a function to cause the display to change on page load:

<script type="text/javascript">

window.onload = function() {
hideDiv()
}

function hideDiv() {
div = document.getElementById('song');
div.style.display = 'block';
}

</script>

Though now I have come to a problem where after the div has been allowed to display, the object 'lost its chance', and does not present itself as anything but a grey box.

Boom bap. Awful close!
posted by tenseone at 12:15 AM on March 8, 2005


I would guess what's happening is that the DOM is being updated but the plugin is not getting any new information after the page is initially loaded. I would guess that directly modifying the HREFs wouldn't work either, but it might be worth trying nonetheless

Poking around it looks like the QuickTime plugin can be controlled somewhat via JavaScript using methods exposed by the plugin, documented here on Apple's site. According to the documentation the JavaScript interface to QuickTime will work in Mozilla-based browsers and IE for Windows, but not IE for Mac — I don't know if that's important to you. It lets you stop, start, and switch media files, etc. There's a bit of sample code as well. You might be able to do something with this.

Good luck!
posted by IshmaelGraves at 5:53 AM on March 8, 2005


This is sort of hacky, but I ran across a similar problem only with video. We've since moved on to trying to use streaming video so this answer is from distant memory...

1. On page load feed the plug-in a dummy file that is like a second of silence or something--the idea is something quick-loading so that the browser can move on with a useful plug-in instance.

2. On page load, point the plug-in at the desired file.

3. Profit!!!

If you haven't looked at using SMIL, that may be another avenue to approach. Perhaps the plug-in will be satisfied loading with loading the SMIL file that points to your audio file instead of loading the whole audio file first.

Anywho, getting back to the original approach... The QT plug-in is addressable in JavaScript. Thus, if your second of silence movie loads and plays successfully, you can then use JavaScript to load a new URL--probably activated by onload(). First you grab a handle using something like this:
var playerRef = document.moviePlayer;
// Where moviePlayer is the id of the object tag

From there you can use the JavaScript API (which is sort of clunky, but it's all we've got, eh?). I've got the mondo Quicktime for the Web (3ed) on my shelf, but you really only need the documentation that IsmaelGraves points you to. Use it a bit like this:
playerRef.Stop();
playerRef.setURL( urlOfDesiredAudioFile );
playerRef.Play();

Like I've said, the project I am working with uses streaming video, but I've had a chance to play with the plug-in using Javascript. My email is in my profile if you wanted more details. I can also send you files for the JavaScript objects I've been working on in relation which may prove useful for your puposes. Then again, it's all probably a howitzer-level response where you seem to need something more fly-swatter sized since I'm also building a whole DHTML video playback control interface.
posted by Fezboy! at 9:06 AM on March 8, 2005


Sorry, unclear above....
1. When you dynamically construct the page, feed the plug-in a dummy file...

2. Then on page load, point the plug-in at the desired file.
posted by Fezboy! at 9:09 AM on March 8, 2005


« Older Illustrator's portfolio website with great flash...   |   How to Deal With a Bad Nurse Newer »
This thread is closed to new comments.