{"id":22364,"date":"2021-06-08T13:42:38","date_gmt":"2021-06-08T13:42:38","guid":{"rendered":"http:\/\/muted_videos_and_subtitles"},"modified":"2025-02-24T15:10:44","modified_gmt":"2025-02-24T23:10:44","slug":"muted_videos_and_subtitles","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/muted_videos_and_subtitles","title":{"rendered":"Muted Videos and Subtitles"},"content":{"rendered":"

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We\u2019re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we\u2019d like to buy in our free time.<\/p>\n

Some of those videos are in our native language; others are in foreign languages that we don\u2019t understand. Sometimes we still enjoy the latter, however, because of the video\u2019s graphical appeal. Other times, we might want to watch muted videos<\/a> because of a loud immediate environment or an absence of headsets.<\/p>\n

This is part of a series of articles about video optimization<\/a>.<\/p>\n

The Value of Subtitles<\/h2>\n

Subtitles are a superb feature for videos, muted or not.<\/p>\n

Have you ever downloaded or watched someone download an SRT<\/a> (.srt<\/code>) file just to have the subtitles show up while watching a movie? As a software developer who builds apps that involve videos, you must inculcate the capacity that enables users to watch subtitles in videos.<\/p>\n

Addition of Subtitles in Videos<\/h2>\n

How can you add video subtitles<\/a>? Just as you can manually download and add SRT files to videos for subtitles, you can programmatically add subtitles to videos with Cloudinary. In fact, you can upload multiple SRT or WebVTT<\/a> files to Cloudinary as normal raw<\/strong> files.<\/p>\n

Making the content of those files show up as subtitles on your videos that have already been uploaded to Cloudinary<\/strong> is as straightforward as overlaying the subtitles on them. See this demo:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget>\n \n\n\n\n <\/video><\/p>\n

Simply specify the overlay parameter l_subtitles<\/code>, followed by the public ID of the raw file<\/a> and its extension. That syntax works in the URL transformation as shown above.<\/p>\n

Programmatically, you can code it this way:<\/p>\n

cloudinary<\/span>.video<\/span>(\"dog<\/span>\", {overlay<\/span>: {resource_type: \"subtitles\"<\/span>, public_id: \"sample_sub_en.srt\"<\/span>}})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Node.js<\/em><\/p>\n
Furthermore, you can customize the way subtitles appear in the video: the color, appearance, font, etc. For example, here\u2019s how to make subtitles yellow in color with a red background and a larger font:<\/p>\n
cloudinary<\/span>.video<\/span>(\"dog<\/span>\", {overlay<\/span>: {font_family: \"arial\"<\/span>, font_size: 100<\/span>, resource_type: \"subtitles\"<\/span>, public_id: \"sample_sub_en.srt\"<\/span>}, color<\/span>: \"#ffff00<\/span>\", background<\/span>: \"red<\/span>\"})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Node.js<\/em><\/p>\n
Generation of Transcripts and Subtitles for Videos<\/h2>\n
Another important step is to generate transcripts for your videos on the fly. If your platform contains a lot of user-generated video content, you cannot count on your users to also upload the SRT files for the videos they upload. Instead, your users depend on your platform to generate subtitles for their content. For instance, social-media users with numerous followers would expect that the app can and would generate subtitles for their uploaded videos and that, as soon as they turn on the subtitle feature, followers can immediately view the subtitles.<\/p>\n
Cloudinary\u2019s Google Video Transcript add-on<\/a> enables you to automate the generation of speech-to-text transcripts of user-generated videos that have been uploaded to your site. For the best possible speech-recognition results, the add-on, which can translate videos in almost any language<\/a>, applies powerful neural-network models to videos with Google\u2019s Cloud Speech API<\/a>.<\/p>\n
After a transcript becomes available, you can do the following:<\/p>\n
    \n
  1. Automatically insert the transcript into your video in the form of subtitles.<\/li>\n
  2. Parse the content of the transcript and display it on a webpage. That way, users can skim the content instead of watching the videos. This approach is extremely popular on learning platforms.<\/li>\n<\/ol>\n
    \"suptitle<\/p>\n
    Here\u2019s the code for generating transcripts:<\/p>\n
    cloudinary.v2.uploader.upload(\"learning_javascript.mp4\"<\/span>, \n  { resource_type<\/span>: \"video\"<\/span>, \n    raw_convert<\/span>: \"google_speech\"<\/span> },\n  function<\/span>(error, result<\/span>) <\/span>{console<\/span>.log(result, error) });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Node.js<\/em><\/p>\n
    Once generation is complete, the add-on creates a new file with a .transcript<\/code> extension in your Cloudinary account with the same public ID as your video file.<\/p>\n
    Note:<\/strong> 
    If you include the  notification_url<\/code> parameter in your method call, the URL you specify receives a notification once the generation process concludes.<\/p><\/div>\n
    Depending on the size of the video file, the process might take a while.<\/strong><\/p>\n
    You might wonder, \u201cWhy a .transcript<\/code> file? Why not a .srt<\/code> or .vtt<\/code> file?\u201d Well, you do have the option to have Cloudinary generate a .srt<\/code> and a .vtt<\/code> file. Just specify your preference, like this:<\/p>\n
    cloudinary.v2.uploader.upload(\"learning_javascript.mp4\"<\/span>, \n  { resource_type<\/span>: \"video\"<\/span>, \n    raw_convert<\/span>: \"google_speech:srt:vtt\"<\/span> },\n  function<\/span>(error, result<\/span>) <\/span>{console<\/span>.log(result, error) });\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Node.js<\/em><\/p>\n
    When the process is complete, the add-on automatically uploads these three generated files to your account:<\/p>\n
    ...\/raw\/upload\/learning_javascript.transcript\n...\/raw\/upload\/learning_javascript.srt\n...\/raw\/upload\/learning_javascript.vtt\n<\/code><\/pre>\n
    Display of Generated Transcripts and Subtitles on Videos<\/h2>\n
    The final step is to display the generated transcripts and subtitles on the video for delivery. It\u2019s as simple as programmatically overlaying the files on the video, like this:<\/p>\n
    cloudinary<\/span>.video<\/span>(\"learning_javascript<\/span>\", {overlay<\/span>: {resource_type: \"subtitles\"<\/span>, public_id: \"learning_javascript.transcript\"<\/span>}})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    Node.js<\/em><\/p>\n
    The URL reads\u2014<\/p>\n
    https:\/\/res.cloudinary.com\/demo\/video\/upload\/l_subtitles:learning_javascript.transcript\/learning_javascript.mp4<\/code><\/p>\n
    References<\/h2>\n
    Below are additional references:<\/p>\n