Ionic 2でHTML5ビデオ要素を読み込む方法

Question

私は自分のサーバーからビデオのリストを表示しようとしていて、いくつかの問題に直面しています。 これはアプリの外観です。

これは私のhtmlコード

私はそのことのように表示する理由を理解しない

<ion-list> 
     <button 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> 
     </button> 
    </ion-list> 

です。動画は正常に再生され、イオンネイティブストリーミングメディアプラグインを使用しています。 ビデオはなぜそのように表示されるのですか？

Answer 1

buttonを削除し、以下に示すようにion-itemを使用してください。

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