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>

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>

• javascript
• css
• html
• html5-video

5 Answers 5

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

I had the same issues with short videos with duration non-proportional to seconds(for example, 10 seconds and 400 milliseconds). The solution was to trim that part that possibly was added by some encoding issue:

ffmpeg -i in.mp4 -ss 00:00:00.0 -t 00:00:10.0 -an out.mp4

I also used native looping and auto-play approach:

<video muted autoPlay loop poster="/static/index/background.jpg" css={videoStyleSheet}>
    <source src="/static/index/output.mp4" type="video/mp4" />
</video>

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();

works for me

// typescript code
    const video = document.getElementById('main-video') as HTMLVideoElement;
    video.addEventListener('ended', () => {
      video.currentTime = 0.05;
      video.play();
    });

// html !!!important delete loop attribute

<video autoplay muted id="main-video">
   <source src="..path to video" type="video/mp4"></source>
</video>

<video width="320" height="240" autoplay="autoplay" loop> 
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />

Hope this helps , this auto plays and loops he HTML5 Video without jQuery, maybe its way off what your looking for but if you just want to loop the video this should do the trick :-)