2

I have a jquery cycle slider that I need to pause either when a video is played or when a slide is reached that displays a video. (Either of those options is fine, but I could not figure out how to pause a slide with a certain class or id.) I am using video.js to display videos.

What is happening is when I press play the video starts playing, but when I move the mouse off the video it automatically goes to the next slide. If I click on the pager thumbnail it stays paused, but if the slideshow progresses normally and I press play, it follows the rules set by the cycle 'timeout.'

What I am looking for is a way to pause the slideshow when the video is played - either by calling an event when the video starts playing, or by pausing the slideshow entirely when a video slide is reached.

I have this in the head:

<script>
    jQuery(document).ready(function($) {    
        $(".project_slides").cycle({
        fx:'fade',
            timeout: 5000,
            prev : '#prev',
            next : '#next',
            pager : '#pager',
            pause: 1,
            pagerAnchorBuilder: function(idx, slide) {
                return '#pager li:eq(' + (idx) + ') a';
            }
        });

        $('#pager a').click(function() { 
            $('.project_slides').cycle('pause'); 
        });

        function pauseitall() {
            $('.project_slides').cycle('pause');
        }   
    });

</script>

And in the body:

<div class="project_slides">
    <div class="slide">
        <img src="/media/{{ Slide.media }}" alt="{{ Slide.caption }}" />
    </div>

    <div class="slide">
        <video id="video_11" 
            class="video-js vjs-default-skin" 
            controls width="512" 
            height="406" 
            poster="/media/images/video-poster.png" 
            preload="auto" loop>
            <source type="video/mp4" src="/media/{{ Slide.media }}">
        </video>

        <script>
            $(function() {
                _V_("video_11").ready(function() {
                var myPlayer = this;
                addEvent(myPlayer.video, "play", function () {
                    pauseitall()}, false);
                    myPlayer.play();
                });
            });
        </script>
    </div>
</div>

Obviously the pauseitall() function is not being called properly, but I've been struggling with this for so long (in so many iterations) that I finally just wanted to post it here and see if anyone knows a solution.

For reference, using jQuery 1.7.2, jquery cycle 2.9999.5, and Video.js 3.2.0

thejartender
  • 9,339
  • 6
  • 34
  • 51
the_zero
  • 25
  • 1
  • 7

1 Answers1

1

Try this:

myPlayer.addEvent("play", pauseitall);

this is how the docs specify how to bind to events

Manse
  • 37,765
  • 10
  • 83
  • 108
  • Thanks, but that didn't seem to have any effect. _Edit 1:_ You changed your answer after I responded. I thought you had to bind events slightly differently when calling it via jquery. But I'm not exactly sure. I'll test. _Edit 2:_ Still didn't work – the_zero Apr 25 '12 at 14:48
  • @the_zero the answer (as it is now) should work as thats how its specified in the docs .... – Manse Apr 25 '12 at 14:52
  • I understand and I've changed the code to `myPlayer.addEvent("play", pauseitall);` but it is not pausing the slidehow. – the_zero Apr 25 '12 at 15:31
  • if you call `$('.project_slides').cycle('pause');` after you call `play` does that pause it ? – Manse Apr 25 '12 at 15:33
  • Unfortunately, it does not pause it. That is curious. Why would that be? – the_zero Apr 25 '12 at 16:25
  • you might have to use `.each()` on your `$('.project_slides')` - can you include your HTML ? or even better create a http://jsfiddle.net – Manse Apr 25 '12 at 16:27
  • I'll see what I can do with jsfiddle – the_zero Apr 25 '12 at 16:54