时间戳

首页 > 解决方案 > Concat 视频使用 cloudinary 和 firestore

node.js - Concat 视频使用 cloudinary 和 firestore

问题描述

我正在将短视频上传到 Cloudinary 并将数据存储在 Firestore 中。当它们上传时，我想显示它们全部连接在一起的预览视频。

我尝试使用 *ngFor 循环和追加数组并没有成功。我是新手，需要帮助。如何在 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>  `

标签： node.jsgoogle-cloud-firestoreangular6cloudinary

解决方案

Cloudinary 支持使用overlay video 参数（l_video: in URLs）拼接视频 例如：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 并稍后添加叠加层，也可以在上传时直接执行此操作。

推荐阅读