<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>