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

我不明白为什么它会这样显示。视频播放正常，我使用的是 ionic 原生流媒体插件。 任何人都可以看到为什么视频显示为这样吗？

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>