Concatenate an image to the beginning and end of a video

Brianary

May 05, 2022 23:56

Ideally, in frontend JS. NodeJS also an option. 

With a 30 second video hosted on Cloudinary, I need to:

- Add a user-given image to the first 5 seconds
- Add a user-given image to the last 5 seconds

to result in a 40 second output video. 

 

I've been browsing various strategies but the most workable one I see is:
- Have the main video stored in Cloudinary
- Have a 5 second blank video stored in Cloudinary
- Upload the user-given image and wait for it to be uploaded (do I have to wait?)
- Transform on the main video:
  - concat BLANK at beginning
    - with image overlay
  - concat BLANK at end
    - with image overlay

 

1. Is that solution doable, and doable in one step?

2. What is the syntax here in JavaScript? Or URL if that's quicker. 

 

Will seriously PayPal anyone who can help me solve this asap. 

0

• 

  Eric Pasos

  May 06, 2022 02:19

  Hi Brianary,

  The videos can be spliced together using the splice transformation parameter that can be used through the backend SDK or transformation URL. There is an example described in this link for your reference. As with concatenating images with videos, you can check out the details as described in this documentation.

  Hope this helps.

  0
• 

  Brianary

  May 07, 2022 07:44 Edited

  Thank you! That was a good starting place. Okay, finally pieced that part of it together: 

  Here's a url that adds an image for 5 seconds as the intro and outtro of a video:

  https://res.cloudinary.com/demo/video/upload/w_300,h_200/w_300,h_200,l_sample,fl_splice,du_3/so_0,fl_layer_apply/w_300,h_200,l_sample,fl_splice,du_3/fl_layer_apply/dog.mp4

   

  One more question: 

  It's not possible to upload an image as part of this operation right? Like I should just do the image upload as a separate step before the video transform?

   

  Thanks for your help. Would be awesome if Cloudinary had some type of logic builder UI for this stuff!

  0
• 

  Danny Valentine

  May 07, 2022 10:48

  I'd say it's best if assets are uploaded to your account ahead of time so that you can refer to them by the public ID, but you could always use a fetch to use non-uploaded assets directly. Using this example from our documentation, you can use l_fetch: and then a base64 encoded URL as part of a transformation. So, if we wanted to replace l_sample, we could take https://res.cloudinary.com/demo/image/upload/beach.jpg and base64 encode the URL which gives us aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvYmVhY2guanBn. Putting that in place of l_sample gives us the following URL: https://res.cloudinary.com/demo/video/upload/w_300,h_200/w_300,h_200,l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvYmVhY2guanBn,fl_splice,du_3/so_0,fl_layer_apply/w_300,h_200,l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvYmVhY2guanBn,fl_splice,du_3/fl_layer_apply/dog.mp4

  As you can see, it's functional, but not a particularly elegant URL, and by using multiple fetches, you could end up with URLs that are longer than 2048, and those aren't supported by most browsers.

  Alternatively, you could look at our video slideshow generation feature and see if that suits your needs. It's currently in beta, but it allows you to combine a series of images and videos into a single video and add transitions between each element.

  I hope this is helpful. If you have any followup questions, please feel free to reply here or if you prefer you can raise a support ticket with us directly.

  Thanks,
  -Danny

  0
• 

  Brianary

  May 10, 2022 06:12

  Very helpful, y'all are cool cats. Thanks.

  0
• 

  Danny Valentine

  May 11, 2022 09:47

  We try our best 😺

  Let us know if you need anything else

  0

Post is closed for comments.