How can I play the next video when my current video is finish using java script?

Here i got the success to play the video according to current time but when unable to retrieve the next video after the finishing of current video according to current time. Here startat attribue in source tag is the starting time of that video.

HTML

<video id="media-video" width="600" height="300">                   
    <source class="active" src="marimatrubhasha.mp4" id="videosource1" type="video/mp4" startat="00:00:00" endat="00:04:07" name="Gujarati Bhasha" description="This is Gujarati Video">                    
    <source class="active" src="php.mp4" id="videosource2" type="video/mp4" startat="00:04:07" endat="00:19:06" name="PHP Video 00:04:07" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource3" type="video/mp4" startat="00:19:06" endat="00:34:05" name="PHP Video" description="This is PHP Video">                   
    <source class="active" src="php.mp4" id="videosource4" type="video/mp4" startat="00:34:05" endat="00:49:04" name="PHP Video" description="This is PHP Video">                   
    <source class="active" src="marimatrubhasha.mp4" id="videosource5" type="video/mp4" startat="00:49:04" endat="00:53:11" name="Gujarati Bhasha" description="This is Gujarati Video">                    
    <source class="active" src="php.mp4" id="videosource6" type="video/mp4" startat="00:53:11" endat="01:08:10" name="PHP Video" description="This is PHP Video">                   
    <source class="active" src="php.mp4" id="videosource7" type="video/mp4" startat="01:08:10" endat="01:23:09" name="PHP Video" description="This is PHP Video">                   
    <source class="active" src="php.mp4" id="videosource8" type="video/mp4" startat="01:23:09" endat="01:38:08" name="PHP Video" description="This is PHP Video">                   
    <source class="active" src="php.mp4" id="videosource9" type="video/mp4" startat="01:38:08" endat="01:53:07" name="PHP Video" description="This is PHP Video">                   
    <source class="active" src="php.mp4" id="videosource10" type="video/mp4" startat="01:53:07" endat="02:08:06" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource11" type="video/mp4" startat="02:08:06" endat="02:23:05" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource12" type="video/mp4" startat="02:23:05" endat="02:38:04" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource13" type="video/mp4" startat="02:38:04" endat="02:53:03" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource14" type="video/mp4" startat="02:53:03" endat="03:08:02" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource15" type="video/mp4" startat="03:08:02" endat="03:23:01" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource16" type="video/mp4" startat="03:23:01" endat="03:38:00" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource17" type="video/mp4" startat="03:38:00" endat="03:52:59" name="3.38 PHP Video" description="This is PHP Video to be played on 3.38">                    
    <source class="active" src="php.mp4" id="videosource18" type="video/mp4" startat="03:52:59" endat="04:07:58" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource19" type="video/mp4" startat="04:07:58" endat="04:22:57" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource20" type="video/mp4" startat="04:22:57" endat="04:37:56" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource21" type="video/mp4" startat="04:37:56" endat="04:52:55" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource22" type="video/mp4" startat="04:52:55" endat="05:07:54" name="PHP Video" description="This is PHP Video">
    <source class="active" src="php.mp4" id="videosource23" type="video/mp4" startat="05:07:54" endat="05:22:53" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource24" type="video/mp4" startat="05:22:53" endat="05:37:52" name="php" description="PHP Video to be played at 5.37">                   
    <source class="active" src="php.mp4" id="videosource25" type="video/mp4" startat="05:37:52" endat="05:52:51" name="PHP Video to be played at 5.37" description="This is PHP Video">                 
    <source class="active" src="php.mp4" id="videosource26" type="video/mp4" startat="05:52:51" endat="06:07:50" name="PHP Video to be played on 5.52" description="PHP Video to be played on 5.52">                    
    <source class="active" src="php.mp4" id="videosource27" type="video/mp4" startat="06:07:50" endat="06:22:49" name="PHP Video to be played on 6.07" description="This is PHP Video">                 
    <source class="active" src="php.mp4" id="videosource28" type="video/mp4" startat="06:22:49" endat="06:37:48" name="PHP Video to be played on 6.22" description="This is PHP Video">                 
    <source class="active" src="php.mp4" id="videosource29" type="video/mp4" startat="06:37:48" endat="06:52:47" name="PHP Video to be played on 6.37" description="This is PHP Video">                 
    <source class="active" src="php.mp4" id="videosource30" type="video/mp4" startat="06:52:47" endat="07:07:46" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource31" type="video/mp4" startat="07:07:46" endat="07:22:45" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource32" type="video/mp4" startat="07:22:45" endat="07:37:44" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource33" type="video/mp4" startat="07:37:44" endat="07:52:43" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource34" type="video/mp4" startat="07:52:43" endat="08:07:42" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource35" type="video/mp4" startat="08:07:42" endat="08:22:41" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource36" type="video/mp4" startat="08:22:41" endat="08:37:40" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource37" type="video/mp4" startat="08:37:40" endat="08:52:39" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource38" type="video/mp4" startat="08:52:39" endat="09:07:38" name="PHP Video" description="This is PHP Video">                  
    <source class="active" src="php.mp4" id="videosource39" type="video/mp4" startat="09:07:38" endat="09:22:37" name="PHP Video" description="This is PHP Video">                          
</video>

Java Script

  $(document).ready(function(){
            var mediaPlayer = document.getElementById('media-video');
             var videosource=document.getElementById('source');
            var Startvideo = mediaPlayer.querySelectorAll('source[startat]');   
            if (mediaPlayer.paused || mediaPlayer.ended) {
                // Change the button to be a pause button
                changeButtonType(playPauseBtn, 'pause');
                // Play the media
                //mediaPlayer.play();
                var d=new Date();       
                var hh=d.getHours();        
                var mm=d.getMinutes();      
                var ss=d.getSeconds();
                var timeString = ((hh < 10) ? "0" : "") + hh;
                timeString  += ((mm < 10) ? ":0" : ":") + mm;
                timeString  += ((ss < 10) ? ":0" : ":") + ss;
                console.log(timeString);        
                var currentTime=timeString;
                console.log('current  time is '+currentTime);       
                Array.prototype.forEach.call(Startvideo, function(elem) {        
                var getStartTime = elem.getAttribute('startat');        
                console.log('start time is '+ getStartTime )                
                     if(getStartTime <= currentTime && elem.getAttribute('endat') >= currentTime){                      
                    var currentTimeSecond=currentTime.split(':');
                    var getStartTimeSecond=getStartTime.split(':');         
                    var TimeSecondsCurrent = (+currentTimeSecond[0]) * 60 * 60 + (+currentTimeSecond[1]) * 60 + (+currentTimeSecond[2]);
                    console.log(TimeSecondsCurrent);
                    var TimeSecondsGetStart= (+getStartTimeSecond[0]) * 60 * 60 + (+getStartTimeSecond[1]) * 60 + (+getStartTimeSecond[2]); 
                    console.log(TimeSecondsGetStart);
                    var totalSeconds= TimeSecondsCurrent - TimeSecondsGetStart;             
                    console.log(totalSeconds);
                    var c=elem.getAttribute('src');         
                    mediaPlayer.src = c;
                    mediaPlayer.currentTime= totalSeconds;  
                    mediaPlayer.play();
                }       
              }); 
            }               
        });

Answer

Below is the code to achieve this.

loadVideo() reads the startat property of the the source tag.

These sources are maintained inside a hidden div. Once a video ends next one is loaded and written to the video tag.

<div id="myVideoSources" style="display:none;">
    <source class="active" src="vid1.mp4" id="videoSource" type="video/mp4" startat="00:00:00" endat="00:04:07" name="Something" description="This is Gujarati Videol">
    <source class="active" src="vid2.mp4" id="videosource2" type="video/mp4" startat="00:02:50" endat="00:19:06" name="PHP Video 00:04:07" description="This is PHP Video">
    <source class="active" src="php.mp4" id="videosource3" type="video/mp4" startat="00:19:06" endat="00:34:05" name="PHP Video" description="This is PHP Video">
    <source class="active" src="php.mp4" id="videosource4" type="video/mp4" startat="00:34:05" endat="00:49:04" name="PHP Video" description="This is PHP Video">
    <source class="active" src="marimatrubhasha.mp4" id="videosource5" type="video/mp4" startat="00:49:04" endat="00:53:11" name="Gujarati Bhasha" description="This is Gujarati Video">
</div>
<video id="media-video" width="600" height="300"></video>
<script>
    $(function () {
        var sources = $("#myVideoSources source");
        var jVideo = $("#media-video");
        var currentVideoNum = 0;
        loadNextVideo();

        jVideo.bind("ended", function () {
            loadNextVideo();
        });

        function loadNextVideo() {
            var source = $(sources.get(currentVideoNum));
            currentVideoNum++;
            if(currentVideoNum >= sources.length) {
                currentVideoNum = 0;
            }

            jVideo.html("");
            jVideo.append(source);
            var plainVideo = jVideo.get(0);
            plainVideo.load();

            plainVideo.play();
            plainVideo.currentTime = getStartTime(source);
        }

        function getStartTime(source) {
            var time = 0;
            try {
                var startAtStr = source.attr("startat");
                time = startAtStr.split(":");
                time = (time[0] * 3600) + (time[1] * 60) + (time[2] * 1)
            } catch(e) {
                console.log(e);
                time = 0;
            }
            return time;
        }
    });
</script>