如何使用 Typescript 在同一视图中显示视频和图像答案

【问题标题】：How to Show Video and Images in the Same View Using Typscript如何使用 Typescript 在同一视图中显示视频和图像
【发布时间】：2019-05-27 22:35:03
【问题描述】：

我正在尝试在 Ionic 中创建一个列表，其中我有一个用于视频和图像 url 的通用数组

body = [{media: "https://firebasestorage.googleapis.com/v0/b/gymtest-ed199.appspot.com/o/uploads%2Fg2VZAx27ABOBG7fpo7LyRiIIe8c2%2F20190527_163701.mp4?alt=media&token=0ce4a8d2-3334-49de-99a7-24724e986f80"},
              {media:"https://firebasestorage.googleapis.com/v0/b/gymtest-ed199.appspot.com/o/uploads%2FgtNphS09UEQKFbzTzPn9CdZyKyM2%2F1558535656752.jpg?alt=media&token=5885af85-d5c9-43e5-a852-b974ce5b49ba"}]

第一个网址是视频，第二个网址是图片

这是我的 HTML：-

<ion-item *ngFor= "let d of body">
  <video height="150px" width="300px" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
   <source [src]="d.media" type="video/mp4" />
  </video>
  <ion-thumbnail>
   <img [src]="d.media"/> 
  </ion-thumbnail>
</ion-item>

我想实现*ngIf来判断url是否为.mp4，加载到video标签，如果url是.jpg，加载到img标签

P.S 我是 ionic 的菜鸟..

【问题讨论】：

标签： image ionic-framework video

【解决方案1】：

修改你的数组元素，使其具有内容类型属性：

body = [
    { media: yourVideoUrlHere, type: “video” },
    { media: yourImageUrlHere, type: “image” },
]

然后在您的视频模板中添加结构指令：

*ngIf=“d.type==‘video’”

图片：

*ngIf=“d.type==‘image’”

【讨论】：