Sustitución de código JavaScript en el interior con innerHTML?

Question

Una cosa tan sencilla que tengo que hacer, y no parece como cualquiera de los jugadores regulares SWF satisfacer mis necesidades, así que creo que tengo que hacer esta solución. Sólo tengo que ser capaz de alternar entre una alta calidad de vídeo y una baja calidad .flv.

Así que estoy pensando en tener sólo dos botones con eventos onclick para cambiar el innerHTML del Javascript, pero me di cuenta de que no sé exactamente cómo. puedo crear un id de una línea de javascript, o debería reemplazar todo el asunto? Aquí está mi código:

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

En el código anterior, todo lo que necesito para cambiar es el enlace "/lessons/videos/BukaTiende.flv" a algo como /lessons/videos/BukaTiende_lower.flv

¿Puedo hacer esto con un getElemenById?

Tengo jQuery.

Answer 1

Sugiero que encapsula los comandos en una función, y ejecutarlo con uno o los otros videos como un parámetro al hacer clic.

Usted dijo que tenía jQuery alrededor, por lo que también podría utilizarlo para unir haga clic en los botones.

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

Answer 2

Usted debe hacer una función que toma como parámetro la url del video y luego llama al SWFObject con ese Paremeter .. ( aviso en el addVariable se utiliza el parámetro de la función )

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');
}

a continuación, añadir llamarlo primera vez con

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

aslo añadir un poco de Identificación a los botones para que pueda hacer referencia a ellos

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

y luego añadir los eventos de clic a los botones ..

<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

Se puede retirar el objeto incrustado de la página cuando el usuario hace clic en un botón y vuelva a ejecutar la secuencia de comandos que se agrega a la página, pero con un valor de variable diferente. Si ponemos la SWFObject dentro de un div, entonces se puede borrar la div estableciendo innerHTML = "";