0

I've been struggling with this for awhile, and am having a brain fart so I wanted to ask for help. I'm using the Cycle2 Plugin and need to pause the slideshow when videojs starts playing I've looked at this Discussion as well as the API Documentation but I still can't seem to get it right.

Here's the code for each individual slide:

<div class="slideshow-item" style="background: url({tag_Image (1162 x 370)_value});">
  <div class="slide-video">
    <video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="380" height="240" poster="{tag_Video Thumbnail (380 x 240)_value}"
 data-setup="{}">
      <source src="{tag_Video URL}" type='video/mp4'>
    </video>
  </div>
  <div class="slide-text-wrapper">
    <div class="slide-text" style="width: {tag_text width (pixels)}px;">
      <p>{tag_description}</p>
      <p><a class="slide-button" href="{tag_Button URL}">{tag_Button Text}</a></p>
    </div>
  </div>
</div>

EDIT The below jQuery seems to be working fine except for the event listener. The function pauseSlideshow runs correctly but it doesn't wait for me to click play, it just automatically runs.

_V_("my_video_1").ready(function(){
     var myPlayer = this;
     function pauseSlideshow(){
       $('.cycle-slideshow').cycle('pause');
       $('.slideshow-button').addClass( 'play' );
      }
     myPlayer.addEvent("play", pauseSlideshow());
});

Thanks for the help,

Jeff

Community
  • 1
  • 1
jeffusu
  • 135
  • 2
  • 2
  • 7

1 Answers1

0

Ok I finally figured out what was happening. I wasn't using the appropriate syntax.

Here is the solution I found:

// Pause slideshow on play
_V_("my_video_1").ready(function(){
   var myPlayer = this;
   function pauseSlideshow(){
     $('.cycle-slideshow').cycle('pause');
     $('.slideshow-button').addClass( 'play' );
    }
    myPlayer.on("play", pauseSlideshow);
});
jeffusu
  • 135
  • 2
  • 2
  • 7