looping html5 video getting black screen after video is playing again in html

Question

I have added a code for playing video as a banner but facing one problem in that is whenever the video is completed getting a black screen for a moment and again the video is playing.

<div class="background-wrap">
  <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>

Answer 1

I have tested this in all the browser. Please take a look to the attributes in this tag and this will also work in your case.

  <video width="400" controls playsinline loop muted >
      <source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>

UPDATE: newer versions of mobile phone browsers on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel. :-)

For more details on the UPDATE section read this: https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 2

I've amended your tag a little to include autoplay loop instead of autoplay="true" loop="loop".

I also think you've just got your HTML syntax a little wrong - instead of putting the source in a <source> tag, you should include a src="" within the <video> tag like so:

<div class="background-wrap">
  <video id="video-bg-elem" preload="auto" autoplay loop muted="muted" width="100%" height="400" src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4"></video>
</div>

As you can see there's no black screen at the end of this looping video. If it is still happening on for you with your own material, it might actually be your video that has a slight gap at the end?