Explicit transformation for exsisting Videos does not work

Jan Fischer

January 28, 2021 12:18 Edited

Hey, I'm trying to use the f_auto and q_auto transformations for our existing videos. What I tried to use is the explicit transformation, like you see below. I can see a new derived video after this operation, but the response from the url is always 400:

https://res.cloudinary.com/dpnfvy3jz/video/upload/f_auto,q_auto/v1611744221/VIDEO_ID.mp4

Video is too large to process synchronously, please use an eager transformation with eager_async=true to resolve

I tried to set Eager Async in the ml_default Upload Preset and also tried to create a new Upload Preset with the q_auto, f_auto eager transformation and eager async to true. None of this worked. I am lost right now. Can somebody help me please?

Thanks, Jan

cloudinary.uploader.explicit('VIDEO_ID', {
  resource_type: 'video',
  type: 'upload',
  eager: [
    {
      quality: 'auto',
      fetch_format: 'auto',
    }
  ],
  eager_async: true,
  eager_notification_url: 'WEBHOOK_URL',
  overwrite: true,
  invalidate: true,
})
.then(uploadResult => console.log(uploadResult))
.catch(error => console.error(error));

Comments

7 comments

Loic Verger Del Bove

January 28, 2021 13:00

Hi Jan,

Thanks for reaching out.

Since `f_auto` will adapt the format based on the user browser, when using eager transformations, adding only `f_auto` won't be enough as you will need to add each possible result of the `f_auto` algorithm. Can you please try to add this eager parameter:

eager: [
    {
      quality: 'auto',
      fetch_format :'mp4',
      video_codec :'h265'
    },
    {
      quality: 'auto',
      fetch_format :'mp4',
      video_codec :'h264'
    },
    {
      quality: 'auto',
      fetch_format :'webm',
      video_codec :'vp9'
    },
    {
      quality: 'auto',
      fetch_format: 'auto',
    }

  ],

Thanks for letting me know if that works.

Best,

Loic

Jan Fischer

January 28, 2021 13:29
Ah ok, makes sense, thank you. I now have all these different urls, which work individually. But if I directly call
```
http://res.cloudinary.com/dpnfvy3jz/video/upload/f_auto,q_auto/v1611744221/...
```
in the Browser it still does not work, which is kinda logically now. Since I have React in the frontend I will later try to use it with the Video component:
```
<Video publicId="VIDEO_ID" >
  <Transformation quality="auto" fetchFormat="auto" />
</Video>
```
If that doesn't work, I will get back to you,

Thanks a lot
0
Loic Verger Del Bove

January 28, 2021 14:51
Hi Jan,

Can you also try this eager code:
```
eager: [
    { raw_transformations:"f_mp4,vc_h265,q_auto"},
    { raw_transformations:"f_mp4,vc_h264,q_auto"},
    { raw_transformations:"f_webm,vc_vp9,q_auto"},
    { raw_transformations:"f_auto,q_auto"}
  ],
```
We have a known issue when the eager transformation using the parameter as previously will use a predefined order that might not be the order you are using the parameters in your URL.

Hope that helps.

Best,

Loic
0
Jan Fischer

January 29, 2021 16:38 Edited
I've now tried it with the React Video SDK. The React Video Player always seems to insert the following video sources:

*.webm, *.mp4, *.ogv

If I add the React Transformation component it inserts these urls:

*/f_auto,q_auto/*.[webm,mp4,ogv]

The only url, that works now is the */f_auto,q_auto/*.webm url. The mp4 still gives me an 400 error. The ogv also gives me an error but I guess I have to add an eager transformation for this format. So whats the problem with the mp4 url? What I also noticed is that it does not overwrite the original uploaded video (mp4). By the way I used the raw_transformation.
0
Aleksandar Kostadinov

January 30, 2021 13:45
Hi Jan,

When using the React code you shared that will create 3 sources, each of them will have f_auto,q_auto. What that will cause is a lot of redundancy and unneeded transformations (i.e. you would have 3x f_auto transformations per each of the 3 sources meaning 9 derived!). When using f_auto that would already cover what the <sources/> would add, therefore, you should use either one or the other rather than both at the same time.

For example, in React, you can use the below code:
<Video cloudName="demo" publicId="dog" sourceTypes={["mp4"]} >
<Transformation quality="auto" fetchFormat="auto" />
</Video>
The above would generate a <video/> tag with a single URL featuring f_auto,q_auto/mp4 and that means you will only need the following transformations to be eagerly generated:
```
eager: [
    { raw_transformation:"f_mp4,vc_h265,q_auto/mp4"},
    { raw_transformation:"f_mp4,vc_h264,q_auto/mp4"},
    { raw_transformation:"f_webm,vc_vp9,q_auto/mp4"}
  ]
```
On the other hand, if you want to use <sources/> then you should remove the fetchFormat transformation and also sourceTypes from above React code and then you will need to eagerly generate the following derived:
```
eager: [
    { raw_transformation:"q_auto/mp4"},
    { raw_transformation:"q_auto/ogv"},
    { raw_transformation:"q_auto/webm"}
]
```
Regarding the overwrite of the original - since you are generating eager transformations it is expected that the original will remain unchanged/as-is and these transformations are created as derived versions of the original.
0
Jan Fischer

February 01, 2021 11:45
Hi Aleksandar,

thanks, I didn't know the "sourceTypes" prop. But what now worked for me best is to use following React code with the later transformations:
```
<Video cloudName="demo" publicId="dog">
  <Transformation quality="auto" />
</Video>
```
In this way it uses the transformed videos for the 3 standard sources.

Best regards,

Jan
0
Aleksandar Kostadinov

February 01, 2021 17:42
Hi Jan,

You're welcome. Great to hear you've found a configuration that meets your requirements.

Yes, the React code you shared will indeed apply q_auto to all 3 default sources (mp4, webm, ogv) and you can use the last `eager` transformation example from my last response to generate those transformations.
0

Post is closed for comments.

Explicit transformation for exsisting Videos does not work

Comments

Didn't find what you were looking for?