HTML5 video previous - next and auto play

Question

I'm new to this site and I am new to HTML5 and Javascript aswell. It's not that I am a beginner, I kinda understand HTML5 and Javascript when I see it, I just can't write it proper myself.

I have many videos, all mp4, all same size, all in the same folder on the server. I already got them to play one after another without break. I don't have any controls. Looks like this (a code I found and copied and changed as far as I understood it):

BODY

<video id="homevideo" width="1022px" height="766px" autoplay onended="run()">
    <source src="video1.mp4" type='video/mp4'/>
</video>

SCRIPT

<script>
video_count =1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == 16) video_count = 1;
        var nextVideo = "video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };
   </script>

It all looks like this now: Presentation

What I want: I want a previous and a next function. So, I have two buttons, a previous and a next button. When I click on the next button, the next video will start and play automatically (no loop). When I click on previous button, the previous video will play again (no loop). So I can simply switch between all my videos forward and backwards. Like this for example: IMAGE

What do I have to add to my code? What to change? I know hot do make buttons ect. Would be nice if someone could give me a clear code for this. Nothing with play or pause or anything.

Thanks very much!

Answer 1

First step is to add an event handler to each button. For example, something like this should work for your next button.

  var el = document.getElementById("nextButton");
  if (el.addEventListener) {
      el.addEventListener("click", yourNextFunction, false);
  } else {
      el.attachEvent('onclick', yourNextFunction);
  }  

Then you need to write the yourNextFunction function to move to the next video. You can base this on your existing code.

var video_count =1,
    videoPlayer = document.getElementById("homevideo");

function yourNextFunction (){
      video_count++;
      if (video_count == 16) video_count = 1;
      var nextVideo = "video"+video_count+".mp4";
      videoPlayer.src = nextVideo;
      videoPlayer.play();
}

You can then do something similar for the previous button.