Конкат видео с использованием облачных и FireStore

Question

Я загружаю короткие видео в Cloudinary и храню данные в Firestore.Когда они будут загружены, я хочу показать предварительный просмотр их всех вместе.

Мне не удалось зациклить массив и добавить его, используя * ngFor.Я новичок в облачной и нуждаюсь в помощи.Как я могу объединить видео, используя наложение облачного преобразования на лету из магазина?

  component.ts

  name = 'Angular 6';
  data: any[] = [];
  cloudName = '...........';
  Video_id;
  res;

  private videosCollection: AngularFirestoreCollection<Video>;
  videos: Observable<Video[]>;

  loading: any;
  constructor(private af: AngularFirestore) {
    this.getvideos();
  }

  ngOnInit() {
    //this.getvideos();
  }

` uploader: CloudinaryUploader = new CloudinaryUploader(
    new CloudinaryOptions({
      cloudName: this.cloudName,
      uploadPreset: 'xz78fi2p'
    })
  );


  upload() {
    this.loading = true;

    this.uploader.uploadAll(); 

    this.uploader.onSuccessItem = (item: any, response: string, status: 
      number, headers: any): any => {
      this.res = JSON.parse(response);
      this.loading = false;
      this.Video_id = this.res.public_id;
      console.log(this.res);
      this.videosCollection.add(this.res) 
    }

    this.uploader.onErrorItem = function (fileItem, response, status, 
headers) {
      console.info('onErrorItem', fileItem, response, status, headers)
    };
  }

  getvideos() {
    this.videosCollection = this.af.collection<Video>('cloudinaryupload');
    this.videos = this.videosCollection.valueChanges();
  }

  snapshotToArray(snapshot) {
    var returnArr = [];

    snapshot.forEach(function (childSnapshot) {
      var item = childSnapshot.val();
      item.key = childSnapshot.key;

      returnArr.push(item);
    });

    return returnArr;
  };


}



component.html

<cl-video public-id="efmiqwpebinzc400ay7i" controls>
   <cl-transformation width="300" height="200" crop="fill">
   </cl-transformation>
   <cl-transformation *ngFor="let Videos of videos | async" 
   attr.overlay="video:{{Videos.public_id}}" flags="splice" width="300" 
   height="200">
   </cl-transformation>
</cl-video>  `

Answer 1

Cloudinary поддерживает объединение видео с помощью параметра наложения видео (l_video: в URL) Например: https://res.cloudinary.com/demo/video/upload/w_300,h_200,c_fill/l_video:dog,fl_splice,w_300,h_200,c_fill/kitten_fighting.mp4

Либо вы можете манипулировать URL-адресом и добавить оверлей позже после загрузки видео, либо вы можете сделать это непосредственно при загрузке.