任何滑块和 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 Player，这样它就不会在视频播放/缓冲期间滑动？

谢谢。

Answer 1

查看AnythingSlider video documentation，其中包含有关如何设置 JW Player 的说明。

我认为，上述代码中的主要问题是脚本标签位于滑块内。当 JW Player 被初始化时，最好在文档就绪事件中，它应该在 AnySlider 初始化之前并且在滑块标记之外完成。

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