如何在使用滑块时停止视频播放

Question

应用

上面我有一个在滑块中包含视频的应用程序。滑块中有2个视频。请播放第一个视频，然后在不停止视频的情况下，单击滑块中的"下一步"滑动到下一个视频并播放该视频。您可以看出两个视频同时播放。

我的问题是，当视频被滑动时，是否可以停止播放？

我使用jwplayer来播放视频，并使用基本的jquery滑块来播放滑块。

代码如下：

 <div id="banner-video_<?php echo $key; ?>">
 <ul class="bjqs">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<li><div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">

jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
    file: "<?php echo 'VideoFiles/'.$v; ?>",
    width: 480,
    height: 270
});
<?php $i++; ?>
</script>
</div>
</li>
<?php } ?>
</ul>
</div>
         <script type="text/javascript">
jQuery(document).ready(function($) {
         $('#banner-video_<?php echo $key; ?>').bjqs({
            animtype      : 'slide',
            height        : 300,
            width         : 700,
            responsive    : true,
            randomstart   : false,
            automatic : false
          });  
          });
          </script>
<?php
    }
        //end:procedure video
?>

Answer 1

您应该在bjqs的源代码中添加暂停命令，尝试使用未缩小的版本，这将更容易修改，当您对此感到满意时，可以再次缩小它。所以在422线上的bjqs中，你会发现

            $c_wrapper.on('click','a',function(e){
            e.preventDefault();
            var direction = $(this).attr('data-direction');
            if(!state.animating){
                if(direction === vars.fwd){
                    go(vars.fwd,false);
                }
                if(direction === vars.prev){
                    go(vars.prev,false);
                }
            }
        });

添加如下命令，当点击链接时暂停所有玩家（使用示例中的代码）：

            $c_wrapper.on('click','a',function(e){
            e.preventDefault();
            jwplayer("myElement-70-0").pause();
            jwplayer("myElement-70-1").pause();
            var direction = $(this).attr('data-direction');
            if(!state.animating){
                if(direction === vars.fwd){
                    go(vars.fwd,false);
                }
                if(direction === vars.prev){
                    go(vars.prev,false);
                }
            }
        });

如果你想让它成为动态的，你可以循环浏览滑块的元素。。只要你使用一个规则来命名视频元素，比如这个

            $('li.bjqs-slide').each( function(index) {
                jwplayer("myElement-70-"+index).pause();
            });

如果你想要不包含视频的幻灯片，只需在jwplayer元素中添加一个类并使用每个类，那么假设你所有的jwplayer元素都有这个类。playjw，你可以做一些类似的事情

            $('.playjw').each( function(index) {
                jwplayer("myElement-70-"+index).pause();
            });

希望它能有所帮助！

Answer 2

JQuery插件"basic JQuery slider"在单击导航文本"perv"one_answers"next"时没有事件通知，但您可以使用data-direction属性钩住它们。

根据JwPlayer文档，您可以像使用jwplayer() 一样驱动视频

API描述了的所有可能性

$('[data-direction="forward"]').click(function(){
    jwplayer().pause();
});
$('[data-direction="previous"]').click(function(){
    jwplayer().pause();
});

我测试暂停视频使用控制台，它工作。将点击事件绑定到按钮也应该有效。

Answer 3

触发幻灯片动画时，需要调用jwplayer('player').pause();或jwplayer('player').stop();。