No one has any ideas here?
Currently, I'm using the swfobject to embed the movie on the page like so:
html and javascript
<div id="flash-module">
<div id="video-player">
<script type="text/javascript">
// <![CDATA[
function SWFSetUp() {
var so = new SWFObject("videoDemo_final.swf", "videoplayerajax", "550", "420", "8", "#ffffff");
//so.addVariable("vid", "");
so.write("flashcontent");
return so;
}
// ]]>
</script>
</div> <!-- end of div#video-player -->
</div> <!-- flash-module -->
This code is on every page of the website even though the player only shows up on two pages. So how I currently have resolved this by extracting the url of all my links and looking for the correct id:
javascript
function View(a,c) {
var controller = c;
var model = a;
this.update = update;
function update() {
//alert(a.getElement());
checkVid();
document.getElementById(a.getElement()).innerHTML = a.getHttpRequest().responseText;
a.resetRequest();
//alert(a.getElement());
c.updateListeners(a.getElement());
}
function checkVid() {
var qc = c.getQuerySet();
for(var x in qc) {
if(qc[x].match(/id=1/) || qc[x].match(/id=2/)) {
if(c.getVideoPlayer()) { c.changeMovie(a.getHttpRequest().responseText); } else { c.createPlayer(); }
break;
}
if(c.getVideoPlayer()) { c.removePlayer(); }
}
}
var noChange=true;
var firstChange=false;
}
Function checkVid manages the movie player. Based on whether an id == 2 or id == 3 exist the movie is changed, player is created or removed.
The below code shows some of the methods of the controller that correlate to handling the movie controls directly(removing, changing the movie and creating the player)
javascript
this.createPlayer = createPlayer;
function createPlayer() {
//alert('create player!');
document.getElementById('flash-module').style.display="block";
SWFSetUp();
videoplayer = true;
}
this.changeMovie = changeMovie;
function changeMovie(x) {
for(i in querySet) {
if(querySet[i].match(/thumb/)) {
document.getElementById('videoplayerajax').movieSw ap(x);
}
}
}
this.removePlayer = removePlayer;
function removePlayer() {
//so=null;
document.getElementById('flash-module').style.display="none";
videoplayer=false;
}
So when a user first enters the site css hides the #flash-module containing the movie player. However, the first instance they navigate to a video player page the function is called to create the player and display the div containing it. Then the second they click off this page to a none player page the #flash-module div is hidden – hiding the flash move but not removing it.
What I would like to do is be able to remove the player completely and then be able to add it without reloading the page. This is because under best of circumstances the entire navigation is handled through ajax. Basically, the site never needs to reload with the way I have set it up. Therefore, I need to find a way to remove and add the player dynamically, without hurting the performance of the site. Since, I'm assuming by just hiding the player and not fully removing it on pages its uneeded(contact, home, ect) I'm hurting the performance of the site. So if anyone has any ideas that would great.
Eventually, I'm going to need to separate out the video player managing into a separate class. However, for now I would just like to be able to add and remove the player without the need to reload the page – if possible…
thanks