Forum Moderators: open
The client wants just one page to serve both files along with a bunch of other stuff. so I need a solution to have both files in the document without both downloading.
My solution was to create div's for each and have javascript show the one the visitor asks for.
there is a script which swaps out the video on the page by clicking an image. Basically hides one div and clears it, then shows the other div and populates it
works fine in FF1.5, IE6, and OP8, but video will not work when changed in Safari
<script type="text/javascript">
function swapV(){
var v1=document.getElementById('vid1');
var v2=document.getElementById('vid2');
var i=document.getElementById('swp');
if(v1.style.display=='block'){
v1.style.display='none';
v1.innerHTML='';
v2.style.display='block';
v2.innerHTML="<object width='320' height='250' classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab'><param name='src' value='pathtosmallfile.mov'><param name='autoplay' value='false'><param name='controller' value='true'><embed src='pathtosmallfile.mov' width='320' height='250' autoplay='false' controller='true' pluginspage='http://www.apple.com/quicktime/download/'></embed></object>";
i.src="videoswap_s.gif";
}
else{
v2.style.display='none';
v2.innerHTML='';
v1.style.display='block';
v1.innerHTML="<object width='720' height='490' classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab'><param name='src' value='pathtofile.mov'><param name='autoplay' value='false'><param name='controller' value='true'><embed src='pathtofile.mov' width='720' height='490' autoplay='false' controller='true' pluginspage='http://www.apple.com/quicktime/download/'></embed></object>";
i.src="videoswap.gif";
}
}
the html is two div's, one for each video. both included in the page for accessability of course and to keep them both accessable to spiders, etc. then a script to clear one div so not to download bnoth files at the same time, then the image to click on to swap the vids
html below...
<div class="vid" id="vid1" style="display:block;"><object width="720" height="490" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="pathtofile.mov"><param name="autoplay" value="false"><param name="controller" value="true"><embed src="pathtofile.mov" width="720" height="490" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object></div>
<div class="vid" id="vid2" style="display:none;"><object width="320" height="250" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="pathtosmallfile.mov"><param name="autoplay" value="false"><param name="controller" value="true"><embed src="pathtosmallfile.mov" width="320" height="250" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/"></embed></object></div>
<script type="text/javascript">document.getElementById('vid2').innerHTML='';</script>
<a href="#top"><img id="swp" src="videoswap.gif" width=393 height=33 alt="click to change video size" title="click to change video size" onClick="swapV();"></a>
My first thought is Safari is having problems with the innerHTML, but I really don't want to write out the whole DOM then appendChild thing. I don't have a mac to test it and the client has an OS X machine and I need to make him happy ya know.
anyone have any experience with this type of error
So, again I don't know for sure what the issue with Safari was. It just seemed to have a problem dynamically recreating the objects.
this new solution was also faster to render and more stable in Firefox., IE and Opera had similar results with both solutions.
