Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在Ionic 2中加载HTML5视频元素_Html_Angular_Css_Ionic2_Ionic3 - Fatal编程技术网

如何在Ionic 2中加载HTML5视频元素

如何在Ionic 2中加载HTML5视频元素,html,angular,css,ionic2,ionic3,Html,Angular,Css,Ionic2,Ionic3,我一直在尝试显示我服务器上的视频列表,我遇到了一些困难。 这就是应用程序的外观 这是我的html代码 <ion-list> <button ion-item *ngFor="let video of recentVideos"> <ion-thumbnail item-left (click)="openVideo(video)"> <video> <source [s

我一直在尝试显示我服务器上的视频列表,我遇到了一些困难。 这就是应用程序的外观

这是我的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>

{{video.title}
{{video.description}}

我不明白为什么它会这样显示。视频播放良好,我使用的是爱奥尼亚原生流媒体插件。
有人能看到视频显示的原因吗?

只需删除
按钮
,然后使用
离子项目
,如下所示

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

{{video.title}
{{video.description}}


只需移除
按钮
并使用
离子项目
,如下所示

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

{{video.title}
{{video.description}}


从按钮更改为离子项目不起作用存在相同问题从按钮更改为离子项目不起作用存在相同问题