Skip to main content

Video conatination and adding watermark overlay

Palle St Cyer

I was trying  to concatenate multiple videos stored in cloudinary and also i need to add watermark to it. I have following doubts
1. Can this be done in single operation?
2. do i need to write the result of concatenation to cloudinary? or can i just call the api through front end dynamically when required?

Thanks

0

Comments

14 comments

Date Votes
  • Loic Verger Del Bove

    Hi Palle,

    Thanks for reaching out.

    Would you mind sharing the URLs of the videos you would like to concatenate, the URL of the watermark you want to add, and the expected result? You should be able to do it directly on the URL and use it for delivery purposes so you shouldn't need to upload the result back to Cloudinary.

    Thanks in advance.

    Loic

    1
  • Palle St Cyer
    Edited

    Hi Loic,
    Thanks for the response, i wish to have the watermark at center of the concatenated video.
    I wish to now the syntax of performing the video concatenation + adding water mark
    I am attaching the urls of the videos,clips i need to merge

    watermark: https://res.cloudinary.com/clipcat/image/upload/v1627042086/3WDSyelP5FXl3jRVaczKy3kwh213/watermark/logo_qekzyb.png

    clip1: https://res.cloudinary.com/clipcat/video/upload/v1627039153/3WDSyelP5FXl3jRVaczKy3kwh213/ad/wppncif1xepbfwjxn2rs.mp4

    clip2: https://res.cloudinary.com/clipcat/video/upload/v1627039097/3WDSyelP5FXl3jRVaczKy3kwh213/intro/tfx7gyomq0y0fzlaldkl.mp4

    clip3: https://res.cloudinary.com/clipcat/video/upload/v1627039126/3WDSyelP5FXl3jRVaczKy3kwh213/outro/jxet00utlkggmbzpquzi.mp4

    clip4 :https://res.cloudinary.com/clipcat/video/upload/v1626791974/3WDSyelP5FXl3jRVaczKy3kwh213/ad/kmbwwryyz1t640fyzn2v.mp4

    Thanks

    0
  • Danny Valentine

    Hi Palle.

    Your concatenated video is as follows:
    https://res.cloudinary.com/clipcat/video/upload/l_3WDSyelP5FXl3jRVaczKy3kwh213:watermark:logo_qekzyb.png/o_50,w_0.5,fl_layer_apply/l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs.mp4,fl_splice/l_video:3WDSyelP5FXl3jRVaczKy3kwh213:intro:tfx7gyomq0y0fzlaldkl.mp4,fl_splice/l_video:3WDSyelP5FXl3jRVaczKy3kwh213:outro:jxet00utlkggmbzpquzi.mp4,fl_splice/3WDSyelP5FXl3jRVaczKy3kwh213/ad/kmbwwryyz1t640fyzn2v.mp4

    What I've done here is:

    • Added a watermark layer with an opacity of 50% and size of 50% 
      l_3WDSyelP5FXl3jRVaczKy3kwh213:watermark:logo_qekzyb.png/o_50,w_0.5,fl_layer_apply/
    • Then using l_video and f_splice, concatenated your videos 
      l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs.mp4,fl_splice/
      l_video:3WDSyelP5FXl3jRVaczKy3kwh213:intro:tfx7gyomq0y0fzlaldkl.mp4,fl_splice/
      l_video:3WDSyelP5FXl3jRVaczKy3kwh213:outro:jxet00utlkggmbzpquzi.mp4,fl_splice/
    • One thing to note when concatenating videos is that the / character needs to be escaped, so 3WDSyelP5FXl3jRVaczKy3kwh213/ad/wppncif1xepbfwjxn2rs becomes 3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs

    You can read more about video concatenation, including how to do it via our SDKs here in our documentation.

    I notice as well that all four videos are the same. You should be able to overwrite them with different videos if needs be while still keeping their respective public IDs.

    I hope this helps. Please feel free to reply to this thread if you have any further questions.

    Thanks,
    -Danny

    0
  • Palle St Cyer
    Edited

    Thanks Danny for detailed explanation

    0
  • Palle St Cyer 
    i am getting following error for the below video, please guide me thanks
    https://res.cloudinary.com/clipcat/video/upload/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs.mp4,fl_splice/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/3WDSyelP5FXl3jRVaczKy3kwh213/iWtdOr0PGPIvuerTyvoH/yldnwqkvdgenpsvhftmz.mp4
    0
  • Eric Pasos
    Edited

    Hi Palle,

    Looking at the error information that is sent in the x-cld-error header (i.e. you can see the value by using your browser's web developer tools to examine the request and response for the image which didn't load correctly), you are trying to concatenate 2 videos with unmatched dimensions (i.e. 352x640 and 1920x1080).

    Videos spliced or concatenated together with a custom transition must have the same width and height. You can use size transformation parameters to ensure that both videos match in size (w_ and h_), and this will be automatically be scaled to the same size if you are using a transition video.

    For example:

    https://res.cloudinary.com/clipcat/video/upload/c_fill,h_200,w_300,q_auto/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs/c_pad,h_200,w_300,q_auto/fl_layer_apply/l_3WDSyelP5FXl3jRVaczKy3kwh213:watermark:logo_qekzyb.png/o_50,w_0.5,fl_layer_apply/3WDSyelP5FXl3jRVaczKy3kwh213/iWtdOr0PGPIvuerTyvoH/yldnwqkvdgenpsvhftmz.mp4

    The transformation delivery URL will have different sections and transformations will be applied to each of the assets separately.

    The watermark will be applied throughout the concatenated video:

    /l_3WDSyelP5FXl3jRVaczKy3kwh213:watermark:logo_qekzyb.png/o_50,w_0.5,fl_layer_apply/

    The concatenated after the main video, including the resizing and cropping (i.e. padded to show the full sized video):

    /fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs/c_pad,h_200,w_300,q_auto/fl_layer_apply/

    The resized and cropped to fill main video (i.e. the first video to be played):

    https://res.cloudinary.com/clipcat/video/upload/c_fill,h_200,w_300,q_auto/.../3WDSyelP5FXl3jRVaczKy3kwh213/iWtdOr0PGPIvuerTyvoH/yldnwqkvdgenpsvhftmz.mp4

    For more information, kindly visit the following link: https://cloudinary.com/documentation/video_manipulation_and_delivery#concatenating_videos

    Hope this helps, please let me know if you have any further questions.

    Best regards,
    Eric

    0
  • Palle St Cyer
    Edited 
    Hi Eric,
    Thanks i got it working,

    can u please guide me regarding how to maintain the order of video.

    I tried appending start_offset so_0,so_1,so_2 etc , please guide me how to maintain order for n number of videos

    my program generated this url, i assumed that sc_0,sc_1,sc_2 will set in correct order

    also i have set watermark in between 2 videos to make watermark appear in all videos

    Also i wish to have final video resolution matching the the best resolution among all the videos

    Thanks

    https://res.cloudinary.com/clipcat/video/upload/c_fill,h_200,w_300,q_auto/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:intro:tfx7gyomq0y0fzlaldkl/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_0/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:iWtdOr0PGPIvuerTyvoH:srbvppmy9jjrumpfp8on/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_1/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:iWtdOr0PGPIvuerTyvoH:ebgtbw0i4tg1cqcwgujm/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_2/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:wppncif1xepbfwjxn2rs/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_3/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:iWtdOr0PGPIvuerTyvoH:yldnwqkvdgenpsvhftmz/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_4/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/3WDSyelP5FXl3jRVaczKy3kwh213/outro/jxet00utlkggmbzpquzi.mp4
    0
  • Palle St Cyer
    1. also is it possible to perform video transform dynamically,
    2. i tried merging video of size 40mb+33mb+17mb+ 6mb using the following url, and i got video too large error, how shall i fix this?

      https://res.cloudinary.com/clipcat/video/upload/c_fill,h_200,w_300,q_auto/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:zplubogkohiq0dpra8do/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_0/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:FzDWBATaAbqkarSeaTxb:r85mknkntoud30zr0edn/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_1/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:FzDWBATaAbqkarSeaTxb:syy4ooyqms92gbooxdvb/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_2/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/3WDSyelP5FXl3jRVaczKy3kwh213/FzDWBATaAbqkarSeaTxb/jxmy6yw3oq4kfk5wwyfp.mp4
    x-cld-error: Video is too large to process synchronously, please use an eager transformation with eager_async=true to resolve

    Thanks

    0
  • Eric Pasos

    Hi Palle,

    In order to achieve your use case, the following requirements shall be demonstrated in the generation of delivery URLs:

    1. Ensure video sequence. The main video that is indicated at the end of the URL will be played first followed by the other videos that will be played from left to right as indicated in the delivery URL (see: VIDEOx).

    http://res.cloudinary.com/epasos/video/upload/c_fill,h_200,q_auto:best,w_300/fl_splice,l_video:VIDEO2/c_fill,h_200,w_300/fl_layer_apply/fl_splice,l_video:VIDEO3/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/fl_splice,l_video:VIDEO4/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/fl_splice,l_video:VIDEO5/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/l_cloudinary_icon.png/o_50,w_0.5/fl_layer_apply/VIDEO1.mp4

    2. Use the start_offset parameter (i.e. trim video) to specify the first second to include in the video (or audio clip). This parameter is often used in conjunction with the eo (end offset) and/or du (duration) parameters. (see the link: https://cloudinary.com/documentation/transformation_reference#so_start_offset).

    Full video duration (i.e. no trimming):   https://res.cloudinary.com/demo/video/upload/dog.mp4
    Start offset at 2s and end at 5s:   https://res.cloudinary.com/demo/video/upload/eo_5,so_2/dog.mp4

    3. Apply the quality parameter (i.e. using the auto:best) on every video, for example:

    https://res.cloudinary.com/demo/video/upload/eo_5,so_2/c_fill,h_200,q_auto:best,w_300/...

    4. To apply the overlay image to all the videos, it can be defined as the last item in the delivery URL.

     

    To demonstrate the implementation, I am using the following videos and overlay image:

    Overlay: https://res.cloudinary.com/demo/image/upload/cloudinary_icon.png

    Video 1: https://res.cloudinary.com/demo/video/upload/kitten_fighting.mp4 (offset: 2 sec, end of offset: 5 sec)
    Video 2: https://res.cloudinary.com/demo/video/upload/dog.mp4 (offset: 3 sec, end of offset: 6 sec)
    Video 3: https://res.cloudinary.com/demo/video/upload/pencil_sketch.mp4 (offset: 4 sec, end of offset: 7 sec)
    Video 4: https://res.cloudinary.com/demo/video/upload/turtle.mp4 (offset: 5 sec, end of offset: 8 sec)
    Video 5: https://res.cloudinary.com/demo/video/upload/elephants.mp4 (offset: 6 sec, end of offset: 9 sec)

    Using the following code (e.g. using the Python SDK), the full duration of every video will be shown and the overlay will be displayed on all of them as well:

    CloudinaryVideo("kitten_fighting.mp4").video(transformation=[
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           #VIDEO2
           {'flags': "splice", 'overlay': "video:dog"},  
           {'height': 200, 'width': 300, 'crop': "fill"},
           {'flags': "layer_apply"},
           #VIDEO3
           {'flags': "splice", 'overlay': "video:pencil_sketch"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           {'flags': "layer_apply"},
           #VIDEO4
           {'flags': "splice", 'overlay': "video:turtle"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           {'flags': "layer_apply"},
           #VIDEO5
           {'flags': "splice", 'overlay': "video:elephants"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           {'flags': "layer_apply"},
           #OVERLAY
           {'overlay': "cloudinary_icon.png"},
           {'opacity': 50, 'width': "0.5"},
           {'flags': "layer_apply"}
    ])


    The resulting delivery URL having the concatenated full duration (i.e. no trimming) videos with overlay:

    https://res.cloudinary.com/demo/video/upload/c_fill,h_200,q_auto:best,w_300/fl_splice,l_video:dog/c_fill,h_200,w_300/fl_layer_apply/fl_splice,l_video:pencil_sketch/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/fl_splice,l_video:turtle/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/fl_splice,l_video:elephants/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/l_cloudinary_icon.png/o_50,w_0.5/fl_layer_apply/kitten_fighting.mp4


    As for the start_offset usage (i.e. with trimming), use the source code below (e.g. using Python SDK) as a guide to generate the delivery URL:

    CloudinaryVideo("kitten_fighting.mp4").video(transformation=[
           {'start_offset': "2",'end_offset': "5"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           #VIDEO2
           {'flags': "splice", 'overlay': "video:elephants", 'start_offset': "3",'end_offset': "6"},
           {'height': 200, 'width': 300, 'crop': "fill"},
           {'flags': "layer_apply"},
           #VIDEO3
           {'flags': "splice", 'overlay': "video:pencil_sketch", 'start_offset': "4",'end_offset': "7"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           {'flags': "layer_apply"},
           #VIDEO4
           {'flags': "splice", 'overlay': "video:turtle", 'start_offset': "5",'end_offset': "8"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           {'flags': "layer_apply"},
           #VIDEO5
           {'flags': "splice", 'overlay': "video:dog", 'start_offset': "6",'end_offset': "9"},
           {'height': 200, 'width': 300, 'crop': "fill", 'quality': "auto:best"},
           {'flags': "layer_apply"},
           #OVERLAY
           {'overlay': "cloudinary_icon.png"},
           {'opacity': 50, 'width': "0.5"},
           {'flags': "layer_apply"}
    ])

    The resulting delivery URL having the concatenated trimmed videos with overlay:

    https://res.cloudinary.com/demo/video/upload/eo_5,so_2/c_fill,h_200,q_auto:best,w_300/eo_6,fl_splice,l_video:dog,so_3/c_fill,h_200,w_300/fl_layer_apply/eo_7,fl_splice,l_video:pencil_sketch,so_4/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/eo_8,fl_splice,l_video:turtle,so_5/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/eo_9,fl_splice,l_video:elephants,so_6/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/l_cloudinary_icon.png/o_50,w_0.5/fl_layer_apply/kitten_fighting.mp4


    And if you wish to interchange the position of the dog and elephants videos (i.e. to play the elephant video first before the dog video), the following delivery URL will be generated by the SDK:

    https://res.cloudinary.com/demo/video/upload/eo_5,so_2/c_fill,h_200,q_auto:best,w_300/eo_6,fl_splice,l_video:elephants,so_3/c_fill,h_200,w_300/fl_layer_apply/eo_7,fl_splice,l_video:pencil_sketch,so_4/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/eo_8,fl_splice,l_video:turtle,so_5/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/eo_9,fl_splice,l_video:dog,so_6/c_fill,h_200,q_auto:best,w_300/fl_layer_apply/l_cloudinary_icon.png/o_50,w_0.5/fl_layer_apply/kitten_fighting.mp4

    Hope this helps, please let me know if you have any further questions.

    Best regards,

    Eric

    0
  • Eric Pasos

    Hi Palle,

    Dynamic video transformation is possible and Cloudinary sets an 'online' video transformation limit of 40MB for Free plans and 100 MB for paid plans. Note that this is not a limit on the size of videos you can upload into your account, but it is the maximum size of a video that can be transformed synchronously/on-the-fly. And you have encountered this specific error X-Cld-Error: Video is too large to process synchronously, please use an eager transformation with eager_async=true to resolve, because you are processing videos that are larger than the allowed limit of your Free plan.

    For videos larger than the allowed limit, you must request that the derived versions are created before they're requested, which we call 'eagerly', and that the processing takes place in the background ('asynchronously'). When using asynchronous eager transformations you can manipulate videos as large as your account's maximum video file size limit.

    Part of the reason that this limit exists is that transforming/transcoding large videos can take significantly longer than smaller videos and there can be a long delay before the first request for the video receives a response, and requests may time out before it finishes processing. If your application needs to know when the derived video is ready, you can use the 'eager_notification_url' parameter and we'll send a request to your server when the requested transformations have been completed, and you can use this to update your system state and start using the newly transformed/derived video.

    Eager transformations can be requested for new videos in the upload API call or configured in an upload preset, including an upload preset that is used when you upload to Media Library. While for existing videos, you can request eager transformations via the explicit API method. Once the video is transformed eagerly/asynchronously it will be available via the URL as normal.

    Please take a look and see if that resolves the issue for you and if you have any additional questions.

    Best regards,

    Eric

    0
  • Palle St Cyer 
    thanks @Eric for detailed explanation

    Can u please show an example for eager transformations via the explicit API method, for  already uploaded videos merging.
    can u please add the explicit eager transformation in the below url thanks

     

    https://res.cloudinary.com/clipcat/video/upload/c_fill,h_200,w_300,q_auto/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:ad:zplubogkohiq0dpra8do/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_0/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:FzDWBATaAbqkarSeaTxb:r85mknkntoud30zr0edn/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_1/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/fl_splice,l_video:3WDSyelP5FXl3jRVaczKy3kwh213:FzDWBATaAbqkarSeaTxb:syy4ooyqms92gbooxdvb/c_pad,h_200,w_300,q_auto/fl_layer_apply,so_2/l_logo_qixmfm.svg/o_50,w_0.5,fl_layer_apply/3WDSyelP5FXl3jRVaczKy3kwh213/FzDWBATaAbqkarSeaTxb/jxmy6yw3oq4kfk5wwyfp.mp4
    0
  • Raz Ziv

    Hey Palle St Cyer,

    Eager transformations are performed asynchronously, therefore, those cannot be achieved by adding parameters to an on-the-fly transformation image URL.

    I can most definitely share with you an example of how this can be done via an Explicit API method call. Can you please let me know which one of our backend SDKs you currently use for making your API requests so that I can share with you the example in that specific programming language/framework? 

    Thanks,
    Raz

    0
  • Palle St Cyer

    Hi raz,
    I am using node js framework.

    what i did was i just concatenated the videos,overlay image url in the format and generated the url


    can u please implement explicit eager method in the below videos+overlay image

    Overlay: https://res.cloudinary.com/demo/image/upload/cloudinary_icon.png

    Video 1: https://res.cloudinary.com/demo/video/upload/kitten_fighting.mp4
    Video 2: https://res.cloudinary.com/demo/video/upload/dog.mp4
    Video 3: https://res.cloudinary.com/demo/video/upload/pencil_sketch.mp4
    Video 4: https://res.cloudinary.com/demo/video/upload/turtle.mp4
    Video 5: https://res.cloudinary.com/demo/video/upload/elephants.mp4

    Thanks

    0
  • Eric Pasos
    Edited

    Hi Palle,

    The explicit method has to be done on every video you have and you can refer to the following code to perform the eager transformation on your large videos:

    var cloudinary = require('cloudinary').v2;

    // set your env variable CLOUDINARY_URL or set the following configuration

    cloudinary.config({
        cloud_name: '<YOUR_CLOUD_NAME>',
        api_key: '<YOUR_API_KEY>',
        api_secret: '<YOUR_SECRET_KEY_MUST_NOT_BE_GIVEN_TO_PUBLIC'
    });

    cloudinary.uploader.explicit("pencil_sketch",
        { type:"upload",
          resource_type: "video",
          eager: [
              { width:300, height:200, crop:"fill"},
          ]},
    function(error, result){console.log(result, error);});
    The code is used to generate a derived video with dimensions as width=300, height=200, and fill crop. You may execute it to all the videos that you need to optimize. (See https://cloudinary.com/documentation/image_upload_api_reference#explicit_method)
     
     
    0

Post is closed for comments.

Didn't find what you were looking for?

New post