AnythingSlider и JWPlayer; Изменения слайдов до завершения видео

Question

У меня возникла проблема с изменением слайдов AnythingSlider до того, как мое видео JWPlayer закончилось. Буферизация видео еще не закончена, поэтому кадр скользит.

Вот мой JW и слайдер код:

<div id="slider_wrap"> 
     <div id="slider_holder" style="width:984px;height:610px;"> 
      <ul id="slider"> 
       <li class="panel1"> 
        <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/jwplayer.js'></script> 
        <div id='mediaspace'>This text will be replaced</div> 
        <script type='text/javascript'> 
         jwplayer('mediaspace').setup({ 
         'flashplayer': '<?php bloginfo('template_directory'); ?>/player.swf', 
         'duration': '196', 
         'file': '<?php bloginfo('template_directory'); ?>/video.mp4', 
         'controlbar': 'bottom', 
         'width': '984', 
         'height': '554', 
         'image': '<?php bloginfo('template_directory'); ?>/img/frame_1.jpg' 
         }); 
        </script> 
       </li> 
       <li class="panel2"> 
        <img src="<?php bloginfo('template_directory'); ?>/img/frame_2.jpg"> 
       </li> 
       <li class="panel3"> 
        <img src="<?php bloginfo('template_directory'); ?>/img/frame_3.jpg"> 
       </li> 
       <li class="panel4"> 
        <img src="<?php bloginfo('template_directory'); ?>/img/frame_4.jpg"> 
       </li> 
      </ul> 
     </div> 
    </div> 

Есть простой способ или знаете тех, кто получил что-нибудь слайдер слушать JW Player, чтобы он не скользит во время видео воспроизведения/буферизации?

спасибо.

Answer 1

Посмотрите на AnythingSlider video documentation, в котором содержатся инструкции по настройке JW Player.

Основная проблема в приведенном выше коде, я думаю, заключается в том, что тег сценария находится внутри слайдера. Когда JW Player инициализируется, желательно, чтобы в событии, подготовленном документа, это должно быть сделано до того, как AnythingSlider будет инициализирован и вне разметки слайдера.

<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/jwplayer.js'></script> 
<script type='text/javascript'> 
$(function(){ 
    jwplayer('mediaspace').setup({ 
    'flashplayer': '<?php bloginfo('template_directory'); ?>/player.swf', 
    'duration': '196', 
    'file': '<?php bloginfo('template_directory'); ?>/video.mp4', 
    'controlbar': 'bottom', 
    'width': '984', 
    'height': '554', 
    'image': '<?php bloginfo('template_directory'); ?>/img/frame_1.jpg' 
    }); 
    $('#slider').anythingSlider({ 
    // add options here 
    }); 
}); 
</script> 

<div id="slider_wrap"> 
    <div id="slider_holder" style="width:984px;height:610px;"> 
    <ul id="slider"> 
     <li class="panel1"> 
     <div id='mediaspace'>This text will be replaced</div> 
     </li> 
     <!-- ... --> 
    </ul> 
    </div> 
</div>