Explicit transformation for exsisting Videos does not work

Comments

7 comments

  • Avatar
    Loic Verger Del Bove

    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

    0
    Comment actions Permalink
  • Avatar
    Jan Fischer

    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
    Comment actions Permalink
  • Avatar
    Loic Verger Del Bove

    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
    Comment actions Permalink
  • Avatar
    Jan Fischer

    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
    Comment actions Permalink
  • Avatar
    Aleksandar Kostadinov

    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
    Comment actions Permalink
  • Avatar
    Jan Fischer

    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
    Comment actions Permalink
  • Avatar
    Aleksandar Kostadinov

    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
    Comment actions Permalink

Please sign in to leave a comment.