xsr
07-26-2006, 11:37 AM
I apologize if this has been addressed in the past, but this problem is so specific that most of my searches didn't turn up anything related.
Anyway:
I've designed a page to display two different Quicktime clips without any kind of reload. For the sake of argument, let's call them One and Two.
When the page first loads, I actually have a placeholder image in the region where the movies will eventually play; after all, it seems like good practices to not hit the user with a QT movie right away, especially if it's not the one they want to view.
The links to each movie are tied to a javascript, here's the code:
displayRegion=document.getElementById("player");
if(showID=="one") {
displayRegion.innerHTML='<div id="Onevideo" style="width:320px; height:256px; margin-left:80px; margin-top:32px;">'
+'<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab">'
+'<param name="src" value="assets/One.mov"/>'
+'<param name="autoplay" value="true"/>'
+'<param name="controller" value="true"/>'
+'<param name="targetcache" value="true"/>'
+'<embed src="assets/One.mov" width="320" height="256" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>'
+'</div>';
}
if (showID=="two") {
displayRegion.innerHTML='<div id="womensvideo" style="width:320px; height:256px; margin-left:80px; margin-top:32px;">'
+'<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab">'
+'<param name="src" value="assets/Two.mov"/>'
+'<param name="autoplay" value="true"/>'
+'<param name="controller" value="true"/>'
+'<param name="targetcache" value="true"/>'
+'<embed src="assets/Two.mov" width="320" height="256" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>'
+'</div>';
}
}
DIV where it's dumped:
<div id="player" style="background-color:#000; width: 483px; height: 315px; float: left;"><img id="overlay" alt="overlay" width="483" height="315" src="assets/player_overlay.jpg"/></div>
And here's the linking in the XHTML (yes, I know both <embed> and innerHTML aren't compliant, I'll deal with that once I'm past this bigger issue):
<area shape="rect" id="Two" href="#" coords="383,38,464,11" alt="Two" onclick="brFashion(this.id);"/>
<area shape="rect" id="One" href="#" coords="475,44,537,6" alt="One" onclick="brFashion(this.id);" />
The problem is that things are getting a little funky in IE - that's the story of my life, by the way - in regards to the QT player. When the JS swaps in the file of choice, the controller bar for the file glitches out. I obviously have the 16px space in there, but instead of a controller there's a very obvious screen draw bug; instead of the usual buttons and slider I get a 16px high, 320px wide "frozen grab" of a random window on my screen. It's a little hard to explain, but trust me when I say that it's just not kosher. ;)
Naturally, it works fine in Firefox - that's the other story of my life - and tentatively things are looking okay in Safari.
Any help would be appreciated.
Anyway:
I've designed a page to display two different Quicktime clips without any kind of reload. For the sake of argument, let's call them One and Two.
When the page first loads, I actually have a placeholder image in the region where the movies will eventually play; after all, it seems like good practices to not hit the user with a QT movie right away, especially if it's not the one they want to view.
The links to each movie are tied to a javascript, here's the code:
displayRegion=document.getElementById("player");
if(showID=="one") {
displayRegion.innerHTML='<div id="Onevideo" style="width:320px; height:256px; margin-left:80px; margin-top:32px;">'
+'<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab">'
+'<param name="src" value="assets/One.mov"/>'
+'<param name="autoplay" value="true"/>'
+'<param name="controller" value="true"/>'
+'<param name="targetcache" value="true"/>'
+'<embed src="assets/One.mov" width="320" height="256" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>'
+'</div>';
}
if (showID=="two") {
displayRegion.innerHTML='<div id="womensvideo" style="width:320px; height:256px; margin-left:80px; margin-top:32px;">'
+'<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab">'
+'<param name="src" value="assets/Two.mov"/>'
+'<param name="autoplay" value="true"/>'
+'<param name="controller" value="true"/>'
+'<param name="targetcache" value="true"/>'
+'<embed src="assets/Two.mov" width="320" height="256" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>'
+'</div>';
}
}
DIV where it's dumped:
<div id="player" style="background-color:#000; width: 483px; height: 315px; float: left;"><img id="overlay" alt="overlay" width="483" height="315" src="assets/player_overlay.jpg"/></div>
And here's the linking in the XHTML (yes, I know both <embed> and innerHTML aren't compliant, I'll deal with that once I'm past this bigger issue):
<area shape="rect" id="Two" href="#" coords="383,38,464,11" alt="Two" onclick="brFashion(this.id);"/>
<area shape="rect" id="One" href="#" coords="475,44,537,6" alt="One" onclick="brFashion(this.id);" />
The problem is that things are getting a little funky in IE - that's the story of my life, by the way - in regards to the QT player. When the JS swaps in the file of choice, the controller bar for the file glitches out. I obviously have the 16px space in there, but instead of a controller there's a very obvious screen draw bug; instead of the usual buttons and slider I get a 16px high, 320px wide "frozen grab" of a random window on my screen. It's a little hard to explain, but trust me when I say that it's just not kosher. ;)
Naturally, it works fine in Firefox - that's the other story of my life - and tentatively things are looking okay in Safari.
Any help would be appreciated.