Замена внутреннего кода javascript на innerhtml?

Question

Такая простая вещь, которую мне нужно сделать, и не похоже, что какой-либо из обычных swf-плееров удовлетворит мои потребности, поэтому я думаю, что мне нужно сделать это обходное решение.Мне просто нужно уметь переключаться между высоким и низким качеством .видео FLV.

Итак, я подумываю о том, чтобы просто иметь две кнопки с событиями onclick, чтобы изменить innerhtml javascript, но я понял, что не знаю точно, как это сделать.могу ли я создать идентификатор одной строки javascript, или я должен заменить все это целиком?Вот мой код:

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

В приведенном выше коде все, что мне нужно изменить, это ссылку "/lessons/videos/BukaTiende.flv" на что-то вроде /lessons/videos/bukatiendee_lower.flv

Могу ли я сделать это с помощью getElementById?

У меня действительно есть jquery.

Answer 1

Я предлагаю инкапсулировать эти команды в функцию и запускать ее с тем или иным видео в качестве параметра по щелчку мыши.

Вы сказали, что у вас есть jQuery, так что с таким же успехом можете использовать его для привязки кликов к кнопкам.

<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

Вы должны создать функцию, которая принимает в качестве параметра URL-адрес видео, а затем вызывает SWFObject с этим параметром..(обратите внимание на Добавляемый параметр мы используем параметр функции)

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

затем добавьте вызовите его в первый раз с помощью

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

также добавьте некоторый идентификатор к вашим кнопкам, чтобы вы могли ссылаться на них

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

а затем добавьте события нажатия к вашим кнопкам..

<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

Вы могли бы удалить внедренный объект со страницы, когда пользователь нажимает на кнопку, а затем повторно запустить скрипт, который добавляет его на страницу, но с другим значением переменной.Если вы поместите SWFObject внутрь div, то вы можете очистить div, установив innerHTML = "";