Looping HTML5 video flashes a black screen on loop

Question

I have a 20 second HTML5 video that loops via jquery. But every time the video starts, a black screen flashes quickly and it's very jarring because it's supposed to blend in with a white background.

I tried using CSS to make the video background white to no avail. Any ideas how may I achieve the desired effect?

<video id="projects-video" width="841px" height="490px" autoplay poster="video/map1280-poster.jpg" >
    <source src="video/map841.mp4" type="video/mp4"/>
    Your browser does not support the video tag. I suggest you upgrade your browser.
 </video>

<script>
   $("#projects-video").bind('ended', function(){
            this.play();
     });
</script>

Answer 1

Just a guess, but maybe try playing the video from 0.5 seconds in when it loops in order to skip the blackscreen in the beginning. Look here for a list of events you can use to manipulate the functionality. I'd look into the currentTime event, on end maybe set to this.currentTime, then set this.play();

Answer 2

The black screen seems to be the time before the first frame of your video. For instance if the video has 30FPS, use video.currentTime = 0.034 (1/30 = 0.0333...) and the black screen should be gone.

I know that the post is old but i hope that it will help somebody in the future :)