Help with my JavaScript Code [Functions]

[mtsgill]

Hi friends.

I have been reading some fantastic stuff around and must admit that you all are doing a wonderful job by helping each other.

I have a slight problem here. I have been trying to work on a little project called "Interactive Narrative Media".

My aim is to create a html page with a Video1 being auto played to start with. Before the video finishes, It shall display two button choices with links to further video and those video clips shall display further buttons to make user interaction possible.

So far, I have been able to define buttons 1 and 2 and their display time using setTimeout and visibility options. I have also linked first two buttons with the video 2 and video3.

MY QUESTION IS: How can I make button 3 and 4 to appear on video 3 and video 4 (depends on whichever user clicks at?) Also, how and where shall I define my buttons 3 and 4 as well as video 4 and 5? Your help would be HIGHLY appreciated!

Here is my code:

<div id="left">
<!--Two buttons are defined here-->
<button onclick="turnLeft()" id="button1" style="position: absolute; left: 55px; top: 473px; height: 33px;">Turn Left</button>
<button onclick="turnRight()" id="button2" style="position: absolute; left: 465px; top: 473px; height: 33px;">Turn Right</button>
<br>
<!--First video on page load is defined here and set to autoplay with customised dimensions-->
<video id="video1" controls="controls" autoplay="autoplay" width="591" height="440">
<source id="mp4_src" src="video1.m4v" type="video/mp4">
</video>
<script>
// 14 seconds delay for left button to appear on video
function showLeft() {
document.getElementById("button1").style.visibility = "visible";
}
setTimeout("showLeft()", 14000);
// 14 seconds delay for right button to appear on video
function showRight() {
document.getElementById("button2").style.visibility = "visible";
}
setTimeout("showRight ()", 14000);
//link to left choice video once left button is pressed and button gets cleared from the video frame at the same time
function turnLeft()
{
document.getElementById("button1").style.visibility="hidden";
document.getElementById("button2").style.visibility="hidden";
document.getElementById("mp4_src").src="video2.m4v";
document.getElementById("video1").load();
}
//link to right choice video once right button is pressed and button gets cleared from the video frame at the same time
function turnRight()
{
document.getElementById("button2").style.visibility="hidden";
document.getElementById("button1").style.visibility="hidden";
document.getElementById("mp4_src").src="video3.m4v";
document.getElementById("video1").load();
}
</script>
<br>
</div>