how to stop video playing when using slider?

问题

APPLICATION

Above I have an application which contains videos in a slider. There are 2 videos in the slider. Please pla the first video and then without stopping the video, click on "Next" in the slider to slide to the next video and play that video. You can tell that both videos are playing at the same time.

My question is that is it possible to stop a video playing when it has been slided?

I am using jwplayer for playing video and basic jquery slider for slider.

Code is below:

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

回答1:

you should add the command to pause in the source of the bjqs, try using the not minified version it will be easier to modify and when you are happy with it you can minify it again. so in bjqs on line 422 you will find

            $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);
                }

            }

        });

add the command to pause all players when a link is clicked like this (using code from your example) :

            $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);
                }

            }

        });

if you want to make it dynamic you can loop through the elements of the slider..as long as you use a rule for naming the video elements, something like this

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

if you want to have slides that don't contain videos, just add a class to the jwplayer element and use each to that, so let's say all your jwplayer elements have the class .playjw, you would do something like

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

hope it helps!

回答2:

The JQuery plugin "basic-jquery-slider" doesn't have events notification when the navigation texts "perv" and "next" are clicked, but you can hooked them using the data-direction attribute.

According to the JwPlayer documentation, you can drive your video like using jwplayer()

The API describes all possibilities

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

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

I test to pause the video using console and it works. Bind the click event to the button should work too.