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