[jQuery] Removing and Adding DOM Elements which hold flash movies. Rut Roh
Hello All,
I've run into a problem on a particular project, and it seems to be
browser specific.
The HTML:
<html>
<head></head>
<body>
<span id="video1" class="video"></span>
<span id="video2" class="video"></span>
<div id="controls">
<img id="prev" src="previous.jpg" />
<img id="next" src="next.jpg" />
</div>
<!-- Now below is the flash cs3 produced html stuff to embed the
video on the window load. Copy/pasted from Adobe -->
<script type="text/javascript">
...
</script>
</body>
<html>
Basically, two span which will hold the flash stuff, and two little
arrow images that will get used to toggle between them. This
particular example has 2 videos, but I need to make it dynamic to hold
any number.
The Javascript functions:
set_controls: function(){
var videos = $('.video'); //an array to hold the video
div's
var content = []; //will be used to hold the
content of the video div's, on window load the adobe stuff populates
it
var i = 0; //index of current video
being shown
$('#prev').click(function(){ //click event for previous
button. Just sets the index to the previous video
if (i == 0) {
i = videos.length - 1;
} else {
i--;
}
Site.toggle_videos(videos, content, i); //after index is
determined, toggle the videos
});
$('#next').click(function(){ //click event for next button.
Just sets the index to the next video
if (i == 0) {
i = videos.length - 1;
} else {
i--;
}
Site.toggle_videos(videos, content, i); //after index is
determined, toggle the videos
});
// after the click events are added, lets capture the adobe
generated html that is found in each
// video span and save it to my content array. These will always
stay static once it is loaded.
jQuery.each(videos, function(index, object) {
content[index] = $(object).children();
});
// because both spans are displayed at first, lets toggle them so
only the first one is showing initially.
Site.toggle_videos(videos, content, i);
},
toggle_videos: function(videos, content, i){ // my toggle
function, takes in the 2 arrays and the current index
jQuery.each(videos, function(index, object){ // iterates
through the video array
if (index == i) { // here we find the one that is going to
be shown
$(object).html(content[index]); // reset the video to
hold the initial video content
$('#controls').before($(object)); // insert it into the
DOM
} else { // this video will not be shown
$(object).remove(); // remove it from the DOM
}
});
}
Now, this works all fine and dandy in Firefox and Safari, but in the
IE's, it will switch properly, but if you switch while in the middle
of a movie playing and then switch back to it, the video is paused at
the spot where the switch happened and will not play again. That does
not happen in Firefox or Safari.
Your thoughts? Is this just a cache thing with IE that can't be worked
around?