Question

197

HTML5 video previous - next and auto play

rated 0 times [ 199] [ 2] / answers: 1 / hits: 23677 / 11 Years ago, thu, october 24, 2013, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

danar

Add To Favorites

Follow

Total Points: 271

Total Questions: 94

Total Answers: 93

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

answered 11 Years ago jaelynncherokeeg · Accepted Answer

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.