Steve Robbins
Steve Robbins

Reputation: 13812

Reset Vimeo player when finished

How can I reset an embed Vimeo video to how it was onload after it's done playing?

The Vimeo API offers an unload method

player.api("unload")

But it isn't working for non-flash players.

Upvotes: 2

Views: 7709

Answers (3)

Debbie Kurth
Debbie Kurth

Reputation: 481

Variation of Steve Robbins solution, with Vimeo specific solution. You don't have to reach the end of the video, but anytime the user bails out, including clicking on a button:

Simple Javascript solution with Vimeo Library loaded: https://player.vimeo.com/api/player.js

function ResetVideo()
{ 
var Field  = "iframe-video";                   // <iframe id=iframe-video
var iframe = document.getElementById(Field);

var bLoad = LoadVimeoLib();                   // Is the Vimeo lib loaded
if(bLoad > 0)
  { 
  var Videoplayer   = new Vimeo.Player(iframe);
  Videoplayer.pause();                       // Pause the video and audio      
  Videoplayer.setCurrentTime(0);             // Reset the video position
    
  // Reset the video back to the iframe
  VideoSrc = Videoplayer.element.src;        // Save the video source
  Videoplayer.element.src = "";              // Empty the source
  Videoplayer.element.src = VideoSrc;        // Reset the video source
  }
}

function LoadVimeoLib()
{
if (typeof jQuery === 'undefined') 
 {
 alert('no jquery installed');
return 0;
}

var scriptlen = jQuery('script[src="https://player.vimeo.com/api/player.js"]').length;
if (scriptlen  == 0) 
  {
  jQuery.ajax({
    type: "GET",
    url: "https://player.vimeo.com/api/player.js",
    dataType: "script"
  });
  }

 return 1;
}

Upvotes: 0

Brad Dougherty
Brad Dougherty

Reputation: 920

unload() should now work properly across all players.

Upvotes: 4

Steve Robbins
Steve Robbins

Reputation: 13812

Using the Vimeo API, you can add an event for finish to trigger the reload. The Vimeo API includes a method unload(), but it isn't supported in HTML players. Instead, reset the URL in the iframe to return the video to it's original state.

HTML

<iframe src="//player.vimeo.com/video/77984632?api=1" id="video"></iframe>

JS

var iframe = document.getElementById("video"),
    player = $f(iframe);

player.addEvent("ready", function() {        
    player.addEvent('finish', function() {
        player.element.src = player.element.src;
    });
});

Upvotes: 8

Related Questions