How to prevent this animation from looping?

Hi. I have the following code that I wrote with help from forum members. I'm still working the bugs out. Here is the code from Frame 1(0). One of the problems is that  when the nextBtn animates onto the screen after the video ends, it slides into the frame using a tween, and then you can hover over it and it changes colors and then you click it to advance to the next frame. However, once you hover over it if you then move off it the tween animation is re-triggered. I tried setting the properties panel from loop to only play once but it didn't help. Any ideas how I could fix this?

this.stop();
var nextBtnVAR = this.nextBtn;
var timelineVAR = this;
this.stopBtn.addEventListener("click", stopVideoFUNC.bind(this));
function stopVideoFUNC()
{
$("#video1")[0].pause();
$("#video1")[0].currentTime = 0;
this.pauseBtn.visible = false;
}
this.playBtn.addEventListener("click", playVideoFUNC.bind(this));
function playVideoFUNC()
{
$("#video1")[0].play();
this.pauseBtn.visible = true;
}
this.pauseBtn.addEventListener("click", pauseVideoFUNC.bind(this));
function pauseVideoFUNC()
{
$("#video1")[0].pause();
this.pauseBtn.visible = false;
}
this.nextBtn.addEventListener("click", nextFrameFUNC.bind(this));
function nextFrameFUNC()
{
this.gotoAndStop(2);
}
this.video1.on("added", function()
{
$("#video1")[0].addEventListener('ended', timelineVAR.endedHandler);
}
);
this.endedHandler = function(e)
{
timelineVAR.gotoAndStop(1);
timelineVAR.pauseBtn.visible = false;
};