Video Concatenation in React.js

AwesomeEJE · March 2023

I am trying to concatenate one video to another in react.js, but the code snippet I copied from the docs isn't working.

new CloudinaryVideo("kitten_fighting.mp4")
  .resize(fill().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new Transformation().resize(fill().width(300).height(200))
      )
    ).prepend()
  );

This is the code snippet I copied from the docs. I replaced "kitten_fighting.mp4" and "dog" with the publicID of the videos I want to merge in the cloud.

Please I need a more detailed guide on how to do this.

aleksandar · April 2023

Hi @AwesomeEJE,

Thanks for raising this.

Could you please try with the below code snippet instead and let us know if that works for you?

import { CloudinaryVideo } from "@cloudinary/url-gen";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { VideoEdit } from "@cloudinary/url-gen/actions/videoEdit";
import { Concatenate } from "@cloudinary/url-gen/qualifiers/concatenate";
import { Transformation } from "@cloudinary/url-gen/transformation/Transformation";



new CloudinaryVideo("kitten_fighting.mp4")
  .resize(fill().width(300).height(200))
  .videoEdit(VideoEdit.concatenate(
    Concatenate.videoSource("dog").transformation(
        new Transformation().resize(fill().width(300).height(200))
      )
    )
  );

If it does work, we'll raise it internally to update the Documentation example.

Best,

Aleksandar

iosonoagenda · April 2023

Nice!

Video Concatenation in React.js

Answers

Categories