How To Load HTML5 Video Element In Ionic 2

Ionic Framework ionic-v3
1

I have been trying to display a list of videos from my server and im facing some difficulties. This is how the app looks like.

Screenshot_2017-09-20-13-29-08
Screenshot_2017-09-20-13-29-08.png720×1280 97.5 KB

This is my html code

<ion-list>
      <ion-item *ngFor="let video of recentVideos">
        <ion-thumbnail item-left (click)="openVideo(video)">
          <video>
            <source [src]="video.fileUrl" type="video/mp4">
          </video>
        </ion-thumbnail>
        <div (click)="openVideo(video)">
          <h2>{{ video.title }}</h2>
          <p>{{ video.description }}</p>
        </div>
        <button ion-button clear item-right icon-only (click)="showPopoverMenu($event, video)">
          <ion-icon name="more"></ion-icon>
        </button>
      </ion-item>
    </ion-list>

I dont understand why its displaying like that. The video plays fine, am using the ionic native streaming media plugin. Can anybody see why the video displays as such ?