Question

将离子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>

我不知道如何才能显示捕获的视频。请我急切地寻求一种完成它的方法。如果可以，请帮助我。感谢。

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

Answer 2

我多次使用捕获视频并在我的视图中显示它，我使用下面的代码。

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

如何使用Typescript在离子2中显示捕获的视频

2 个答案: