Hide video component HTML5

Hi,  I have a canvas with 2 video components. 

and 3 buttons,  firs button is to show first video and hide second.  second button is to show second video and hide first,

and third buttons is to hide both videos.

Show and hide works for the components at the beggining. but then it doesent work using the buttons.  only show works.

any help would be appreciated.


my code:

this.movieClip_1.visible = false;
this.movieClip_2.visible = false;

this.button_3.addEventListener("click", fl_ClickToHide.bind(this));

function fl_ClickToHide()
{
this.movieClip_2.visible = false;
this.movieClip_1.visible = true;
}

this.button_4.addEventListener("click", fl_ClickToHide_2.bind(this));

function fl_ClickToHide_2()
{
this.movieClip_2.visible = true;
this.movieClip_1.visible = false;
}

this.button_6.addEventListener("click", fl_ClickToHide_4.bind(this));

function fl_ClickToHide_4()
{
this.movieClip_2.visible = false;
this.movieClip_1.visible = false;
}