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

Question

APPLICATION

上面我有一个应用程序，其中包含滑块中的视频。滑块中有 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

当点击导航文本“perv”和“next”时，JQuery 插件“basic-jquery-slider”没有事件通知，但您可以使用data-direction 属性挂钩它们。

根据JwPlayer documentation，你可以像使用jwplayer()一样驱动你的视频

API 描述了所有可能性

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

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

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

Answer 3

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