Substituir dentro do código JavaScript com innerHTML?

Question

Uma coisa tão simples que eu preciso fazer, e isso não parece ser qualquer um dos jogadores regulares swf vai atender às minhas necessidades, então eu acho que eu preciso fazer esta solução alternativa. Eu só preciso ser capaz de alternar entre uma alta qualidade e vídeo de baixa qualidade .flv.

Então, eu estou pensando em ter apenas dois botões com eventos onclick para mudar o innerHTML do javascript, mas eu percebi que eu não sei exatamente como. Eu posso criar um id de uma linha de javascript, ou devo substituir a coisa toda? Aqui está o meu 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">

No código acima, tudo o que precisa mudar é o link "/lessons/videos/BukaTiende.flv" para algo como /lessons/videos/BukaTiende_lower.flv

Posso fazer isso com um getElementById?

Eu tenho jquery.

Answer 1

Eu sugiro encapsular esses comandos em uma função, e executá-lo com um ou outros vídeos como um parâmetro no clique.

Você disse que tinha jQuery ao redor, tão bem como poderia usá-lo para clique ligam aos botões.

<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

Você deve fazer uma função que recebe como parâmetro a URL do vídeo e, em seguida, chama o SWFObject com que paremeter .. ( aviso no addVariable nós usamos o parâmetro da função )

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

em seguida, adicione chamá-lo pela primeira vez com

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

aslo adicionar algum id para seus botões para que você possa referenciá-los

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

e, em seguida, adicionar os eventos de clique para os seus botões ..

<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

Você pode remover o objeto incorporado a partir da página quando o usuário clica em um botão, em seguida, execute novamente o script que adiciona à página, mas com um valor variável diferente. Se você colocar o SWFObject dentro de uma div, então você pode limpar o div definindo innerHTML = "";