Блог

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

Я безуспешно пытался зациклить массив и добавить его с помощью *ngFor. Я новичок в cloudinary и нуждаюсь в помощи. Как я могу объединить видео с помощью cloudinary transform overlay «на лету» из firestore?

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

Cloudinary поддерживает объединение видео с помощью параметра overlay video (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-адрес и добавить наложение позже, после загрузки видео, либо сделать это непосредственно при загрузке.