Question

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

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">