how to stop video playing when using slider?

Question

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

sdespont · Answer 1 · 2013-02-14T07:14:20.313

1

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.

edited Feb 14 '13 at 07:14

answered Feb 14 '13 at 06:59

sdespont

13,915
9
56
97

It doesn't seem to pause the video when I have slide to the next video. Do you know a work around to determine with my example in knowing that when a slide has happened to pause video. Obviously you showed how to pause the video but I want it to be able to pause when the slide has happened – user2056342 Feb 14 '13 at 17:43
B for basic : bjqs doesn't have callback for this type of events. Sorry. – sdespont Feb 14 '13 at 22:06

score 1 · Accepted Answer · answered Feb 14 '13 at 22:04

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!

score 0 · Answer 3 · answered Feb 14 '13 at 04:59

0

When the slide animation is triggered you need to call jwplayer('player').pause(); or jwplayer('player').stop();.

answered Feb 14 '13 at 04:59

James Coyle

9,922
1
40
48

Are you saying place the code within here: ` $('#banner-video_').bjqs({` ? – user2056342 Feb 14 '13 at 06:35
It doesn't seem to pause the video when I have slide to the next video. Do you know a work around to determine with my example in knowing that when a slide has happened to pause video. Obviously you showed how to pause the video but I want it to be able to pause when the slide has happened – user2056342 Feb 14 '13 at 17:46

how to stop video playing when using slider?

3 Answers3

Linked