Gray screen appears in HTML5 video?

Ionic Framework ionic-v3
1

I am trying to use html5 video in my Ionic 3 application. I have successfully integrated it in my application. But the problem is, before loading the video, it shows a gray screen like below:

enter image description here

But, after that the video can be seen properly like below:

enter image description here

Every time a gray screen comes before the actual video.

My code:

<ion-row class="card" *ngFor="let list of chapter.videos; let i = index">
    <ion-row class="video-container" *ngIf="indexlist.videoIndex == i">
        <video id="vdo-player1" controls frameborder="0" autoplay playsinline webkit-playsinline>
            <source src="{{list.video_url}}" type="video/mp4">
        </video>
    </ion-row>
</ion-row>

How to hide the gray screen before the video loads?