CODEWITHSUNDEEP
javascriptjqueryvimeovimeo-apifroogaloop
user2985093
user2985093

Reputation: 63

Simple pause with vimeo api Froogaloop

Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.

There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.

Here's a FIDDLE, and my current jquery script to hide the video

$(document).click(function (event) {
    if (!$(event.target).hasClass('click')) {
        $('#video').hide();
    }      
});

which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone

Upvotes: 3

Views: 3017

Answers (2)

user2985093
user2985093

Reputation: 63

Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.

Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.

var iframe = $('#video iframe')[0];
var player = $f(iframe);

$('.showvideo').on('click', function(){
    $('#video').show();
    $('.image').hide();
    player.api('play');
});

$(document).click(function (event) {
          if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
    $('#video').hide();
    $('.image').show();
    player.api('pause');
          }
});

Remember to append api=1 to the vimeo link. And the url must be https, not http.

Upvotes: 2

mbrrw
mbrrw

Reputation: 306

froogaloop can be a pain in the arse.

The code to get you started is here: https://developer.vimeo.com/player/js-api#universal-with-froogaloop

I've adapted that to get it working i think how you expect here: https://jsfiddle.net/fLe5xs4v/

Setting it up like so:

var iframe = $('#video iframe')[0];
var player = $f(iframe);

Note that if you change the text in the play and pause buttons you will break this code: 

$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

Give it a shot it should get you going in the right direction at least. Good luck!

Upvotes: 1

Related Questions