AnythingSlider和JWPlayer;在视频结束前，幻灯片发生变化

Question

在JWPlayer视频完成之前，我遇到了AnythingSlider更改幻灯片的问题。视频的缓冲还没有完成，所以帧会滑过去。

这是我的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播放器，所以它不会在视频播放/缓冲期间滑动?

谢谢。

Answer 1

看一下AnythingSlider视频文档，其中包括如何设置JW Player的说明。

我认为，上面代码中的主要问题是脚本标签在滑块内。当JW Player被初始化时，最好在一个文档准备事件中，它应该在AnythingSlider被初始化之前完成，并且在slider标记之外。

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