如何在单个标签中显示视频或图像？

Question

我有一个带有 2 个选项

img

和

videos

的下拉菜单，我必须显示与我的下拉选择相关的数据，所以我怎样才能实现这一点，请帮助我。

这是我的 HTML 代码：

<img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;"> 
or
 <video width="320" height="240" controls> <source src="videopath" type="video/mp4">
</video>

或者我该如何使用“ng if”来做到这一点

Answer 1

使用`ng-if`

选择下拉菜单

<select ng-model='option'>
 <option value='image'>Image</option>
 <option value='video'>Video</option>
</select>

将您的图像/视频代码更改为此

 <img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;" ng-if="option=='image'"> 
 <video width="320" height="240" controls> <source src="videopath" type="video/mp4" ng-if="option=='video'"></video>

如果您想要此图像/视频都使用单行，最好为此编写一个组件。

Answer 2

使用“bootstrap”你可以做一个“可折叠”手风琴 检查这个演示：https://jsfiddle.net/qq37qbdh/

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#videos">
        Videos</a>
      </h4>
    </div>
    <div id="videos" class="panel-collapse collapse in">
      <div class="panel-body">
        videos section
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#images">
        Images</a>
      </h4>
    </div>
    <div id="images" class="panel-collapse collapse">
      <div class="panel-body">
        Images Section
      </div>
    </div>
  </div>
</div>

Answer 3

这是一个对我有用的解决方案。通常，您的视频/图像来自 URL 并分配给 src，在我的例子中，它们不是本地和静态的，而是来自 IPFS，但可以来自任何 URL。我用 JSON 创建了一个简单的 obj 数组：

export interface media{'src': string, 'type': string}
var myMedia: media[] = [];

然后，当我填充数组中每个 obj 的“src”部分时，我在一个调用 Promise“mediaType”的服务函数中进行了一些 MIME 检查...

for(var x=0; x < myMedia.length; x++){
    if(myMedia[x].src!=null){
        this.mediaType(x, myMedia[x].src).then(function(data){
            myMedia[data.index].type = data.ret;
        }.bind(this)).catch( err => {
            console.log('error: ' + JSON.stringify(err));
        }); 
    } else {
        myMedia[x].mediaType = null;
        //handle condition where src was null for some reason;
    }
}

...这是 mediaType 承诺...

mediaType(index: number, URL: string){ 
    return new Promise((resolve, reject) => {
        fetch(URL, {method:'HEAD'})
        .then(response => {
            if (!response.ok) {
                throw new Error(response.statusText)
            }
            var ret = response.headers.get('content-type');
            resolve({'ret': ret, 'index': index});
        },
        (err) => {
            reject({error : err});
          }
        )
    })
}

索引 # 允许 for 循环异步向前旋转，并且仍然将值应用于正确的数组元素。现在在你的 HTML *ngFor 中看看，你的 myMedia 元素“media”可以看起来像这样......

<img
    class="w-full object-cover"
    [src]="media.src" *ngIf="token.mediaType!=null && token.mediaType.split('/', 2)[0]=='image'">

<video
    class="w-full object-cover" controls
    [src]="media.src" *ngIf="token.mediaType!=null && token.mediaType.split('/', 2)[0]=='video'">
</video>

拆分将允许任何图像或视频 MIME 工作（例如：image/png 与 image/jpg，或 video/mp4 与 video/mov）。

Answer 4

您只需使用

<object data="movie.mp4" width="400" height="300"></object>
<object data="pic_trulli.jpg" width="300" height="200"></object>

对象标签。这是来自 HTML5 的标签。所以你必须在网页中使用 。这可以用来显示图像、视频、PDF 等。