CODEWITHSUNDEEP
javascripthtmlvideo
Matthias Gies
Matthias Gies

Reputation: 115

HTML5 video previous - next and auto play

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!

Upvotes: 5

Views: 26524

Answers (3)

si Ismail
si Ismail

Reputation: 1

Try with the code below:

<video id="homevideo" autoplay="" controls webkit-playsinline="" width="100%" height="100%" >
 <source src="video1.mp4" type="video/mp4"> 
 <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>
 </source>
</video>

Upvotes: 0

Tom Glendestam
Tom Glendestam

Reputation: 1

<script>
    var videocount =1;
	var player=document.getElementById('homevideo');
    player.addEventListener('ended',dispositor);
    function dispositor(x){
    if(!x) 
    { x = window.event; }
	videocount++;      
	if (videocount > 2){ // last number of video playing in loop. 
	videocount = 1;}		
	player.src="video"+videocount+".mp4";	//complete url
}
</script>
<video id="homevideo" autoplay="" controls webkit-playsinline="" width="100%" height="100%" >
<source src="video1.mp4" type="video/mp4">
</video>

Upvotes: 0

Jim Jeffries
Jim Jeffries

Reputation: 10081

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.

Upvotes: 4

Related Questions