This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ 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

Follow
Avatar
Andres De Jesus
  • Edited

Hi,

What's the correct way to specify the transformation to show transcripts using the video tag?

This is not working for me 

{videos.length &&videos.map((video, i) => (
<divkey={'player-' + i}className="course-video-iframe"style={{ display: (i === videoIndex) ? 'block' : 'none' }}>
{console.log(video.cloudinary_public_id + '.transcript') }
<video
id={'player-' + i}
controls
className="cld-video-player cld-fluid"
data-cld-public-id={video.video_url}
data-cld-transformation={`${JSON.stringify({
     transformation: [
         { overlay: { resource_type: 'subtitles', public_id:                 video.cloudinary_public_id + '.transcript' } }, { flags: 'layer_apply' }
]
})}`}>
</video>
</div>
))}

Neither is explicitly:

<video
id={'player-' + i}
controls
className="cld-video-player cld-fluid"
data-cld-public-id={video.video_url}
data-cld-transformation='{
"transformation": [
{ "overlay": { "resource_type": "subtitles", "public_id": "dev/courses/Hambre/videos/Lincoln.transcript" } },
{ "flags": "layer_apply" }
]
}'>
</video>

Ok not even on the player itself is working:

window.cloudinary.videoPlayers('.cld-video-player', {
showJumpControls: true,
showLogo: false,
logoOnclickUrl: baseUrl,
autoplay: false,
cloud_name: process.env.CLOUDINARY_ID,
transformation: [
{overlay: {resource_type: "subtitles", public_id: "dev/courses/Hambre/videos/Lincoln.transcript"}},
{flags: "layer_apply"}
]
})
}
 
Nor as a separate track, even though I can see the vtt url fine on my browser (Can't use this approach anyway as it forces the preset access mode to be public or I get a 401 error on the console) :

<video
id={'player-' + i}
controls
crossOrigin="anonymous"
className="cld-video-player cld-fluid"
data-cld-public-id={video.video_url}>
 
</video>

Don't know whats going on.
0

Comments

5 comments

Sort by Date Votes
  • 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
    • Edited

    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
  • Avatar
    Andres De Jesus
    • Edited

    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 https://cloudinary.com/documentation/upload_widget_reference. 

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

    0
    Comment actions Permalink

Post is closed for comments.