使用 Froogaloop JavaScript 和 jQuery 重新启动 Vimeo iFrame

Question

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

Answer 1

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

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

Answer 2

要完全重新启动，我喜欢

player.api('unload')

Answer 3

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()
      }
   }