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

AnythingSlider和JWPlayer;在视频播放完毕之前滑动更改

1 个答案: