3

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

user2985093
  • 63
  • 1
  • 2
  • 13

2 Answers2

2

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.

user2985093
  • 63
  • 1
  • 2
  • 13
1

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!

mbrrw
  • 196
  • 4
  • Functionality is almost right. If clicking empty space were like clicking the pause button. I'd like it w/o buttons, and keeping with the code I already have. I gave it a shot, but the var cause the existing code to break unless I declare them after.... I'm not sure how to call the api without 'button'. I don't know what to bind it to. I don't need the api for play, that's already done. I need the api for pause. Since I'm trying to trigger the event based on something that's not there (absence of 'click' class), rather than something that is there, there's "nothing" to bind the call to. – user2985093 May 15 '15 at 01:00