AnythingSlider and JWPlayer; Slide changes before video is finished

Question

I'm having a problem with AnythingSlider changing slides before my JWPlayer video has finished. The buffering of the video hasn't finished yet so the frame slides over.

Here is my JW and slider code:

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

Is there an easy way or know of anyone who has got anything slider to listen to JW Player so it doesn't slide during video playback/buffering?

Thank you.

Answer 1

Take a look at the AnythingSlider video documentation, which includes instructions on how to set up JW Player.

The main issue in the above code, I think, is that the script tag is within the slider. When JW Player is initialized, within a document ready event preferably, it should be done before AnythingSlider is initialized and outside of the slider markup.

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