Display transcripts on video players using <video> tag

Comments

4 comments

  • Avatar
    Andres De Jesus

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

    <video
    id={'player-' + i}
    controls
    className="cld-video-player cld-fluid"
    data-cld-public-id={video.cloudinary_public_id}
    data-cld-transformation={`${JSON.stringify({
    transformation: [
    { overlay: { font_family: 'impact', font_size: 15, resource_type: 'subtitles', public_id: video.cloudinary_public_id + '.transcript' } },
    { flags: 'layer_apply' }
    ]
    })}`}>
    </video>
    0
    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,
    Thomas

    0
    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:

    https://res.cloudinary.com/dro2pqyxz/raw/upload/v1653058707/dev/courses/Civil_War/videos/LincolnAuth.transcript
    https://res.cloudinary.com/dro2pqyxz/video/upload/s--AiK3AVop--/v1653058702/dev/courses/Civil_War/videos/LincolnAuth.mp4

    This works for authenticated asset full url:

    data-cld-public-id={https://res.cloudinary.com/dro2pqyxz/video/upload/s--AiK3AVop--/v1653058702/dev/courses/Civil_War/videos/LincolnAuth.mp4}

    But just the publicId does not:


    data-cld-public-id={dev/courses/Civil_War/videos/LincolnAuth}
    The track approach also returns 401:

    <track label="English"kind="subtitles"srcLang="en"src="https://res.cloudinary.com/dro2pqyxz/raw/upload/v1653068419/dev/courses/Civil_War/videos/Cows.vtt"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.

     
    0
    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: 

    ```
    cloudinary.video("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:

     data-cld-public-id="http://res.cloudinary.com/cloudname/video/authenticated/s--1111111-/l_subtitles:myvideo.transcript/myvideo.mp4">

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

    Thanks
    Michal

    0
    Comment actions Permalink

Please sign in to leave a comment.