CODEWITHSUNDEEP
javascriptjqueryapirestartvimeo
technopeasant
technopeasant

Reputation: 7939

Restart Vimeo iFrame with Froogaloop JavaScript and jQuery

My page dynamically launches one of several Vimeo iFrame embedded videos and I'm using jQuery to fade them in/out and start/stop. Right now, my close function hides the video and subsequently pauses it. If you bring up the same video after its been hidden it begins from where it was paused the time before. I'd like it to restart. I can't figure out just the right action. Some how "stop" and "restart" aren't options (how illogical is that? play/pause/stop).

I'm linking to Vimeo's hosted version of Froogaloop JS and using jQuery to call the functions.

Thanks!

JavaScript:

$('#close, #underlay').click(function() {
    $('.vim, #close, #container, #underlay').fadeOut(400);
    var player=$f($('.vid:visible')[0]);
    player.api('pause');
});

Upvotes: 1

Views: 4143

Answers (3)

T.Woody
T.Woody

Reputation: 1218

I prefer a solution of persistently reseting all the videos and then pausing them. Next, play the current video that is being shown.

Below code can be optimized, but it gets the job done with no real drawbacks.

   function playCurrentVidPWA() {
      let allVids = document.getElementsByClassName('vimeo-player');
      let currentVideo = mySwiper.slides[mySwiper.activeIndex].querySelector('iframe');
   
      // Pause all videos
      if (allVids)
      {
         for (let i = 0; i < allVids.length; i++)
         {
            const iVid = allVids[i]
            let player = new Vimeo.Player(iVid);
            // Set the time of the video back to the begining
            player.setCurrentTime(0)
            // Pause the video for no frame-skip animations
            player.pause()
         }
      }
      // Play current slide video
      if(currentVideo)
      {
         let player = new Vimeo.Player(currentVideo);
         player.play()
      }
   }

Upvotes: 0

erdostom
erdostom

Reputation: 387

To restart completely, I like

player.api('unload')

Upvotes: 1

Shaz
Shaz

Reputation: 15867

When you have it fade in, you could seek the video to the beginning like this:

player.api("seekTo", 0);
player.play();

Upvotes: 2

Related Questions