Replacing inside javascript code with innerhtml?

Question

Hi folks, Such a simple thing I need to do, and it doesn't seem like any of the regular swf players will meet my needs, so I think I need to do this workaround. I just need to be able to toggle between a high quality and a low quality .flv video.

So I'm thinking of just having two buttons with onclick events to change the innerhtml of the javascript, but I realized I don't know exactly how. can I create an id of one line of javascript, or should I replace the whole thing? Here is my code:

<script type="text/javascript">
var so = new SWFObject('/lessons/videos/player.swf','mpl','610','480','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addVariable('file','/lessons/videos/BukaTiende.flv');
so.write('mediaspace');
</script>

</div></div>
<input type="button" value="low"><input type="button" value="high">

In the above code, all I need to change is the "/lessons/videos/BukaTiende.flv" link to something like /lessons/videos/BukaTiende_lower.flv

Can I do this with a getElementById?

I do have jquery.

Answer 1

You could remove the embedded object from the page when the user clicks on a button, and then rerun the script that adds it to the page, but with a different variable value. If you put the SWFObject inside a div, then you can clear the div by setting innerHTML = "";

Answer 2

You should make a function that takes as a parameter the url of the video and then calls the swfObject with that paremeter.. (notice at the addVariable we use the parameter of the function)

function loadVideo( pUrl )
{
var so = new SWFObject('/lessons/videos/player.swf','mpl','610','480','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addVariable('file', pUrl);
so.write('mediaspace');
}

then add call it the first time with

<script type="text/javascript">
       loadVideo('/lessons/videos/BukaTiende.flv');
</script>

aslo add some id to your buttons so you can reference them

<input type="button" value="low" id="low">
<input type="button" value="high" id="high">

and then add the click events to your buttons..

<script type="text/javascript">
   $(document).ready(
     function(){
        $('#low').click( function(){ loadVideo('/path/to/lowversion.flv') } );
        $('#high').click( function(){ loadVideo('/path/to/highversion.flv') } );
     }
   );
</script>

Answer 3

I suggest encapsulating those commands in a function, and running it with one or the other videos as a parameter on click.

You said you had jQuery around, so might as well use it to bind click to the buttons.

<script type="text/javascript">
  function launch_video(quality){

    video_qual=(quality=='high')? '' : '_lower';

    var so = new SWFObject('/lessons/videos/player.swf','mpl','610','480','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addVariable('file','/lessons/videos/BukaTiende'+video_qual+'.flv');
    so.write('mediaspace');
    }

  $(document).ready(function(){
    $('.vid_button').click(function(){launch_video($(this).val());});
    });

</script>

</div></div><!-- I guess I'll leave those random divs in there-->

  <input class='vid_button'  type="button" value="low">
  <input class='vid_button' type="button" value="high">