HTML5 Play movie from multiple parts without flashing screen

Question

I have a video tag and a movie cutted in parts of 10 seconds each, with name: 1.webm, 2.webm ....... 1535.webm. I tried to make a js code which find when the video is ended and play the next one, but I have a problem: the screen flashes and the movie is not playing continuously. I need to play it exactly as a movie, with continous video.

Is there any options to do this? It doesn't matter if it is not in JavaScript or if it is a combination of many scripts and codes.

<video id="my_video" width="640" height="480" autoplay>
    <source src="files/1.webm" type="video/webm">
</video>

<script>
var src = 0;
var video = document.getElementById("my_video");

document.querySelector("#my_video").addEventListener("ended", nextVideo, false);

function nextVideo() {
    src = src + 1;
    video.src = "files/" + src + ".webm";
    video.play();
}
</script>

Answer 1

It becomes very difficult if you are changing the src of the video as it will load the entire video once src changes and hence you are facing flashing screen effect. It seems impossible to get seamless video by using video parts yet you can try it this way:

Pre-load all the videos using different elements for each video and set preload="auto" attribute to all the elements. You need to play with the visibility of the elements in such a way that you will play one video at a time. First video will be autoplayed. As the ended event fires, just change the visibility of the next element to be true and previous element to be false(Do not use dispay:block/display:none as I have observed that in some mobile devices, video tags having style display:none are not being pre-loaded by browser). Also maintain some background to the video just to avoid white background flash effect.

Refer this snippet:

var my_video = document.getElementById("my_video");
var my_video2 = document.getElementById("my_video2");
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);

function nextVideo() {
  my_video2.play();
  my_video2.setAttribute('class', '');
  my_video.setAttribute('class', 'hidden');
}

.hidden {
  position: absolute;
  top: -10000px;
  left: -10000px;
}
video {
  background: black;
}

<video id="my_video" width="640" height="480" preload="auto" autoplay controls>
  <source src="test.mp4" type="video/mp4">
</video>
<video id="my_video2" width="640" height="480" preload="auto" controls class="hidden">
  <source src="test2.mp4" type="video/mp4">
</video>
<button type="button" onclick="nextVideo()">Next</button>