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

单击导航文本“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();
});

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

Answer 2

你应该添加命令暂停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 3

触发幻灯片动画后，您需要拨打jwplayer('player').pause();或jwplayer('player').stop();。

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

3 个答案: