can't call video pause from onComplete

[adventmedia]

Simple enough I would have thought… I'm fading out a video and I want to pause it when the fade is done.

 

The HTML is this:

<video width="1024" height="576" id="logoanim">
<source src="assets/am_logo.mp4" type="video/mp4">
<source src="assets/am_logo.ogv" type="video/ogg">
</video>

The call is this:

TweenLite.to($("#logoanim"), 1, {volume: 0, onComplete: $("#logoanim").pause});

 

Nothing happens - the video keeps playing (the volume does fade, though)

 

I replaced the onComplete reference to a function:

function pauseVideo() {
$("#logoanim")[0].pause();
}

which did work.

So I tried: 

TweenLite.to($("#logoanim"), 1, {volume: 0, onComplete: $("#logoanim")[0].pause});

and that threw an error:

 

TypeError: 'pause' called on an object that does not implement interface HTMLMediaElement.

 

So, okay, I found a work-around, but why is the work-around necessary? Why can't I call pause() directly?

[Carl]

Sounds like you may need to define onCompleteScope:$("#logoanim")[0]

 

• onCompleteScope : Object - Defines the scope of the onComplete function (what "this" refers to inside that function).

http://api.greensock.com/js/com/greensock/TweenLite.html

 

 

Basically when calling a function of another object from a tween scope gets lost (a JavaScript issue, nothing to do with GSAP).

 

Tough to know for sure without testable code. If it doesn't work feel free to create a demo as intructed here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[jamiejefferson]

Yep this is correct, Javascript doesn't maintain the original scope automatically when calling referenced functions, so you need to use onCompleteScope as well e.g. Demo

 

var foo = {
    bar: function() { console.log(this) }
}
var baz = foo.bar;


// WITHOUT SCOPE

baz();
// logged: window
TweenMax.set(x, { y: 0, onComplete: foo.bar });
// logged: TweenMax


// WITH SCOPE

baz.apply(foo);
// logged: foo
TweenMax.set(x, { y: 0, onComplete: foo.bar, onCompleteScope: foo });
// logged: foo

[adventmedia]

yup, that was it, thanks