This support forum is no longer in use. Please use the Cloudinary Community at to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Display transcripts on video players using <video> tag



  • Avatar
    Andres De Jesus

    Fixed by specifying the publicId instead of the video url and adding font_familiy and font_size to the transformation.

    id={'player-' + i}
    className="cld-video-player cld-fluid"
    transformation: [
    { overlay: { font_family: 'impact', font_size: 15, resource_type: 'subtitles', public_id: video.cloudinary_public_id + '.transcript' } },
    { flags: 'layer_apply' }
    Comment actions Permalink
  • Avatar
    Thomas Gurung

    Hi Andres,

    Thanks for reaching out and I'm glad you were able to figure out a solution. This will help many other Cloudinary users so thanks again for adding your fix.

    Please let me know if you have any other questions or queries.

    Kind Regards,

    Comment actions Permalink
  • Avatar
    Andres De Jesus

    Yeah, no problem.

    I do have a following question, I did have to specify the publicId but also had to change the upload preset access mode to public from authenticated, otherwise I would get a 401 on the browser console. I want to keep my access mode authenticated and also be able to use transcripts.

    To keep things simple, lets assume I have:

    This works for authenticated asset full url:


    But just the publicId does not:

    The track approach also returns 401:

    <track label="English"kind="subtitles"srcLang="en"src=""default></track>

    And the only way transcripts work is with publicId.

    My idea is to upgrade to cookie-based authentication to have more control over duration, but need to know that transcripts would work for authenticated assets with the video tag and player.

    Comment actions Permalink
  • Avatar
    Michal Kuperman

    Hi Andres,

    Delivering Authenticated videos by including just the public_id in the HTML (data-cld-public-id) is not supported. With that said, you can include the full signed URL in the HTML and it would work as you mentioned. 

    When using authenticated URLs, both the original asset and the derived version cant be accessed without authentication. When applying an overlay for the subtitles, you are actually creating a derived version so you would need to sign it as well. 

    For example, using the Node SDK: 

    ```"myVideo.mp4", {"overlay":"subtitles:myvideo.transcript", sign_url: true, type: "authenticated"})

    Then you can include the full signed derived URL (which includes the subtitles) in the `data-cld-public-id`. 

    For example:


    Please let us know if this works for you and if you need any further assistance.


    Comment actions Permalink
  • Avatar
    Andres De Jesus

    Hey Michal,

    I am using the upload widget and do not see way to include your suggestion  {"overlay":"subtitles:myvideo.transcript", sign_url: true, type: "authenticated"} on your docs 

    Also, trying to add it as an Incoming/Eager transformation on the upload preset itself but only see option for Overlay Image.

    Comment actions Permalink

Post is closed for comments.