Remplacement de l'intérieur du code javascript avec innerHTML?

Question

Une telle chose simple que je dois faire, et il ne semble pas comme l'un des joueurs réguliers swf répondra à mes besoins, donc je pense que je dois faire cette solution de contournement. J'ai juste besoin de pouvoir basculer entre une haute qualité et la vidéo d'une qualité faible.

Alors, je pense avoir juste deux boutons avec un événement onclick pour changer le innerHTML du javascript, mais j'ai réalisé que je ne sais pas exactement comment. puis-je créer un identifiant d'une ligne de javascript, ou devrais-je remplacer tout ça? Voici mon 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">

Dans le code ci-dessus, tout ce que je dois changer est le lien « /lessons/videos/BukaTiende.flv » à quelque chose comme /lessons/videos/BukaTiende_lower.flv

Puis-je faire avec un getElementById?

J'ai jquery.

Answer 1

Je suggère encapsulant ces commandes dans une fonction, et en cours d'exécution avec une ou les autres vidéos en tant que paramètre en cliquant dessus.

Vous avez dit que vous aviez jQuery autour, donc peut-être aussi bien l'utiliser pour lier cliquez sur les boutons.

<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

Vous devriez faire une fonction qui prend comme paramètre l'URL de la vidéo et appelle ensuite la SWFObject avec cette paremeter .. ( avis au addVariable nous utilisons le paramètre de la fonction )

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

puis ajoutez l'appeler la première fois avec

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

ASLO ajouter un peu à vos id boutons afin que vous puissiez les référencer

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

puis ajoutez les événements de clic à vos boutons ..

<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

Vous pouvez supprimer l'objet incorporé de la page lorsque l'utilisateur clique sur un bouton, puis exécutez à nouveau le script qui ajoute à la page, mais avec une valeur variable différente. Si vous mettez le SWFObject dans une div, vous pouvez effacer la div en définissant innerHTML = « »;