如何在離子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>