0

I'm embedding JW Player inside a Fancybox frame. What I'd like to have happen is the video stop playing/loading if the frame is closed. The code, and everything else that I've tried, works in Chrome but never in IE and FF.

What I have currently:

$('.lightbox').fancybox({
    //href: jThis.attr('href'),
    type: 'inline',
    padding: 15,
    width: 960,
    height: 540,
    autoSize: false,
    scrolling: 'no',
    enableEscapeButton: true,
    afterClose: function() {$("#large-video").empty();} //This is what I've tried changing
});

That bottom line, I've tried also just doing "jwplayer().stop()" and "function() {jwplayer().stop()};. Both work just fine in Chrome, but the video continues playing in IE9 and FF. Rather at a loss here. Anyone done this before?

Kurt
  • 1,868
  • 3
  • 21
  • 42
  • what version of fancybox? `enableEscapeButton` is not a valid option neither for v1.3.4 or v2.x .... additionally, inline video is not a good idea : why don't link directly to the video (and use fancybox media if using v2.x)? – JFK Oct 29 '12 at 21:17
  • Looks like fancybox 2.0.5. Sorry, the enableEscapebutton was a leftover, I have removed that. I always commented out the type: override. Neither made any difference. – Kurt Oct 29 '12 at 22:08
  • why don't link directly to the video (and use fancybox media if using v2.x)? – JFK Oct 30 '12 at 05:44
  • 1
    .... or check http://stackoverflow.com/a/8772837/1055987 for a solution out of inline content. – JFK Nov 02 '12 at 17:18
  • A few days after but, I used a variation on the inline content solution you linked to and it worked. Can't mark your comment as the answer, but thanks. – Kurt Nov 08 '12 at 23:16
  • ... but you could up vote my other post ;) – JFK Nov 08 '12 at 23:47

2 Answers2

0

I had a similar problem. The fix was to stop JWPlayer, then to empty() and remove() the DOM element containing it. As in:

jwplayer().stop();
$("#container").empty().remove();

where #container is a div containing the player. If you want to play the video again, you would have to re-instantiate the player in the DOM.

Carl Raymond
  • 4,429
  • 2
  • 25
  • 39
0

You need to used the jwplayer method .remove() in your teardown code. simply deleting the lightbox elements is not enough.

Taken from JWPlayer api docs.

.remove() Being the reverse of the setup() call, this call will remove a JW Player from the page. It ensures the player stops playback, the DOM is re-set to its original state and all event listeners and timers are cleaned up. Any listeners will need to be reinstantiated if another player is set up.

http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference#remove

This will also fix a related issue (this is the one I was encountering) where by player situated in a lightbox fails to load on the second attempt at launching it.

note: the error in this instance will be:

There was an error calling back an event handler for "ready". Error: Cannot read property 'clientWidth' of null jwpsrv.js:1 Uncaught TypeError: Cannot read property 'ownerDocument' of null.

user432350
  • 161
  • 9