如何使用 Typescript 在 ionic 2 中显示捕获的视频答案

【问题标题】：How to display captured video in ionic 2 using Typescript如何使用 Typescript 在 ionic 2 中显示捕获的视频
【发布时间】：2017-03-29 22:15:45
【问题描述】：

将 ionic 2 与 Typescript 结合使用，我可以使用以下代码捕获视频：

takeVideo() {
let data: Array<any> = this.MediaFile;
let  options = { 
   limit: 1, 
   duration: 15,
   type: "video/mp4",
   height: 100,
   width: 120,
   quality: 1
};
MediaCapture.captureVideo(options)
  .then((MediaFile) => { this.MediaFile[0] = "data:video/mp4" + MediaFile;
    console.log(MediaFile);
    let i, path, len;
    for (i = 0, len = data.length; i < len; i += 1) {
      console.log(path);
      // How do I display this video to the user?
      this.videoFilePath = MediaFile[0].fullPath;

    }
  },
  (err) => {
    console.error(err);
  }
  );
}

但我无法显示捕获的视频以使用户能够预览捕获的视频。同时，拍摄的视频始终保存在手机中。我在 home.html 中尝试使用以下代码来显示捕获的视频：

<video width="320" height="240" id="resource-video" controls="controls" autoplay="false" 
  [src]="MediaFile" *ngIf="MediaFile">
</video>

我不知道还能做什么来显示捕获的视频。请我急切地寻找一种方法来完成它。如果可以的话，请帮助我。谢谢。

【问题讨论】：

您是否设法为此找到解决方案？我现在也有同样的问题
@J.Rem 您的视频问题解决了吗？如果不让我知道，我有一个解决方案。

标签： typescript html5-video cordova-plugins ionic2

【解决方案1】：

为我的项目做了一些解决方法，这是我的解决方案。希望它可以帮助某人。

import { Component, ViewChild } from '@angular/core';
import { Camera } from '@ionic-native/camera';
import { MediaCapture } from '@ionic-native/media-capture';
import { VideoPlayer } from '@ionic-native/video-player';

export class HomePage {

@ViewChild('myvideo') myVideo: any;
videoURL: any;


this.videoCapture(this.camera.MediaType.VIDEO);

videoCapture(mediaType) {

 var options = {
  limit: 1,
  mediaType: mediaType,
  duration: 10
};

this.mediaCapture.captureVideo(options).then((data: MediaFile[])=>{

    let videoData = JSON.stringify(data);
    let res1 = JSON.parse(videoData);

    this.videoURL = res1[0]['fullPath'];

    let video = this.myVideo.nativeElement;

    video.src =  this.videoURL;
    video.play();

}, (err) => {
  this.presentToast('Error while selecting video');
});

}
}

在我的html中

<video #myvideo controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" width="100" height="100" class="videoPlayer"></video>

【讨论】：

【解决方案2】：

我使用了很多次捕获视频并将它们显示在我的视图中，我使用了如下代码。

<iframe ng-src="MediaFile" frameborder="0" >
</iframe>

【讨论】：