{"id":28028,"date":"2022-03-21T19:02:58","date_gmt":"2022-03-21T19:02:58","guid":{"rendered":"http:\/\/Adding-Subtitles-to-Video-Content"},"modified":"2022-03-21T19:02:58","modified_gmt":"2022-03-21T19:02:58","slug":"adding-subtitles-to-video-content","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/","title":{"rendered":"Adding Subtitles to Video Content with Redwood"},"content":{"rendered":"

Sometimes you just want to watch videos with the subtitles on. It might be because you want to mute the video and just read what\u2019s happening. Or maybe you\u2019re using subtitles to help teach yourself a different language.<\/p>\n

These are a few reasons why it\u2019s important to know how to add subtitles to videos in your web apps. It\u2019s also important to include subtitles for accessibility purposes so that everyone can get the information from your videos. So we\u2019re going to build a Redwood app that uses Cloudinary to display video subtitles using .srt<\/code> files.<\/p>\n

Setting up the project<\/h2>\n

To get started we\u2019ll initialize a new Redwood project with the following command:<\/p>\n

$ yarn create redwood-app --typescript video-subtitles\n<\/code><\/span><\/pre>\n
This command generates a functioning full-stack app. There are a number of files and folders, but we\u2019ll mainly work in the api<\/code> and web<\/code> directories. These contain the code for the front-end and back-end respectively. This project uses the --typescript<\/code> flag so we\u2019ll be able to add types for everything from the beginning.<\/p>\n
Let\u2019s start with the back-end and set up our database.<\/p>\n
Writing the database schema<\/h2>\n
Open the schema.prisma<\/code> file in api > db<\/code>. This is where we\u2019ll set up our database connection and the schema for all of the tables. The first thing we\u2019ll do is update the provider<\/code> value from sqlite<\/code> to postgresql<\/code>. This is how we tell the app to connect to our Postgres instance.<\/p>\n
Next, we need to update the DATABASE_URL<\/code> environment variable in the .env<\/code> file to your local Postgres. Your connection string might look similar to this:<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/subtitles\n<\/code><\/pre>\n
Don\u2019t worry if you don\u2019t have a database called subtitles<\/code>. When we run the migration, this will be created automatically.<\/p>\n
Now we can define the model for the videos we\u2019ll upload. You can delete the UserExample<\/code> model and replace it with the following code:<\/p>\n
model Video {\n  id        Int     @id @default<\/span>(autoincrement())\n  url       String<\/span>\n  srtFile   String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This defines the table and the columns we\u2019ll need for the database to store the videos and their subtitle files. We\u2019re going to do one more thing before doing the database migration.<\/p>\n
Seeding the database with data<\/h3>\n
We\u2019ll seed the database with a subtitle file to have data to get started with. Check out the scripts<\/code> folder and you\u2019ll see a file called seed.ts<\/code>. This is where we\u2019ll add the data for the video. You can download an example of a .srt<\/code> file here<\/a> and save it to the root of your project.<\/p>\n
If you don\u2019t have a Cloudinary account<\/a>, this is the perfect time to make one so that you can upload a video and the subtitle file. Once you have these two files uploaded to your Cloudinary account, then you can update the code in seed.ts<\/code> to match the Video<\/code> schema we have.<\/p>\n
import<\/span> type { Prisma } from<\/span> '@prisma\/client'<\/span>\nimport<\/span> { db } from<\/span> 'api\/src\/lib\/db'<\/span>\n\nexport<\/span> default<\/span> async<\/span> () => {\n  try<\/span> {\n    const<\/span> data: Prisma.VideoCreateInput['data'<\/span>][] = [\n      { url<\/span>: `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/video\/upload\/v1606580790\/elephant_herd.mp4`<\/span>, srtFile<\/span>: `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/raw\/upload\/v1643650731\/sample_nyiy7a.srt`<\/span> }\n    ]\n    console<\/span>.log(\n      \"\\nUsing the default '.\/scripts\/seed.{js,ts}' template\\nEdit the file to add seed data\\n\"<\/span>\n    )\n\n    Promise<\/span>.all(\n      data.map(async<\/span> (data: Prisma.VideoCreateInput['data'<\/span>]) => {\n        const<\/span> record = await<\/span> db.video.create({ data })\n        console<\/span>.log(record)\n      })\n    )\n  } catch<\/span> (error) {\n    console<\/span>.warn('Please define your seed data.'<\/span>)\n    console<\/span>.error(error)\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
An important thing to note in this code is that you need to update the url<\/code> and srtFile<\/code> values to use the links from your Cloudinary account. Since this is the only data we\u2019re going to seed in the database, we can go ahead and run the migration with the following command:<\/p>\n
$ yarn redwood prisma migrate dev\n<\/code><\/span><\/pre>\n
This command creates the subtitles<\/code> database if it doesn\u2019t exist, creates the Video<\/code> table schema, and adds the seed data to the table. If you check your local Postgres instance, you should see a record in the Video<\/code> table already.<\/p>\n
Now that we\u2019ve done everything we need to with the database setup, let\u2019s move on to the GraphQL server.<\/p>\n
Making the GraphQL types and queries<\/h2>\n
One of my favorite things about Redwood is that once you have all of your database schema defined, there are a few commands that make it super easy to generate all of the types, queries, and mutations to handle all of the CRUD operations in GraphQL. So let\u2019s run the following command to generate all the things we need on the back-end.<\/p>\n
$ yarn redwood generate sdl video --crud\n<\/code><\/span><\/pre>\n
This one command has just generated all of the files and code we need in order to work with our data on the front-end. Take a look in api > src > graphql<\/code> and you\u2019ll see the video.sdl.ts<\/code> file. This has all of the types we need in GraphQL for the video data based on how we defined the database schema. Now look over in api > src > services > videos<\/code>. This has the file with all of the queries and mutations we need to execute actions on the database.<\/p>\n
That\u2019s all of the GraphQL requirements met with a single command. Now we can turn our attention over to the front-end where most of the interesting work is happening because we\u2019ll be using Cloudinary\u2019s video uploader and their upload API.<\/p>\n
Creating the video page<\/h2>\n
Moving over to the front-end, take a look in the web > src<\/code> directory. This is where the rest of our work will take place. We\u2019ll start by adding the package we need to use the Cloudinary widget. Go to the web<\/code> directory in your terminal and run the following command:<\/p>\n
$ yarn add react-cloudinary-upload-widget\n<\/code><\/span><\/pre>\n
Then we\u2019ll make a new page that will handle the uploads for both our videos and subtitle files and it will also display the videos we\u2019ve uploaded before with the subtitles enabled. To make this new page, run the following command:<\/p>\n
$ yarn redwood generate page video\n<\/code><\/span><\/pre>\n
This will create a new page component in web > src > pages > VideoPage<\/code> and it will update the Routes.tsx<\/code> file to include this new page. We\u2019re going to start by adding the video upload functionality to this page.<\/p>\n
Uploading the videos to Cloudinary<\/h3>\n
So open the VideoPage.tsx<\/code> file and take a look at the boilerplate code. We\u2019ll use the Cloudinary upload widget to handle our videos and we\u2019ll keep a record of the URL for display later. You can delete the code below the <h1><\/code> element inside the component. That will leave your file looking like this.<\/p>\n
import<\/span> { Link, routes } from<\/span> '@redwoodjs\/router'<\/span>\nimport<\/span> { MetaTags } from<\/span> '@redwoodjs\/web'<\/span>\n\nconst<\/span> VideoPage = ()<\/span> =><\/span> {\n  return<\/span> (\n    <><\/span>\n      <MetaTags<\/span> title<\/span>=\"Video\"<\/span> description<\/span>=\"Video page\"<\/span> \/><\/span>\n\n      <h1<\/span>><\/span>VideoPage<\/h1<\/span>><\/span>\n    <\/><\/span><\/span>\n  )\n}\n\nexport<\/span> default<\/span> VideoPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll replace the unused import with the following import. This will give us access to that widget and all of its functionality.<\/p>\n
import<\/span> { WidgetLoader, Widget } from<\/span> 'react-cloudinary-upload-widget'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Before we jump into using this widget component, let\u2019s define a couple more environment variables. Open the .env<\/code> file and add the following values below your DATABASE_URL<\/code>. These will protect your sensitive information from being visible directly in the code. You can find the values for these variables in your Cloudinary dashboard.<\/p>\n
CLOUD_NAME=your_cloud_name\nUPLOAD_PRESET=the_preset_name\n<\/code><\/pre>\n
Now we can turn back to the VideoPage<\/code> component. Let\u2019s add an empty upload function that we\u2019ll update later and the upload widget itself.<\/p>\n
\nimport<\/span> { WidgetLoader, Widget } from<\/span> 'react-cloudinary-upload-widget'<\/span>\nimport<\/span> { MetaTags } from<\/span> '@redwoodjs\/web'<\/span>\n\nconst<\/span> VideoPage = ()<\/span> =><\/span> {\n  function<\/span> uploadVideoFn<\/span>(<\/span>) <\/span>{\n\n  }\n\n  return<\/span> (\n    <><\/span>\n      <MetaTags<\/span> title<\/span>=\"Video\"<\/span> description<\/span>=\"Video page\"<\/span> \/><\/span>\n\n      <h1<\/span>><\/span>VideoPage<\/h1<\/span>><\/span>\n\n      <WidgetLoader<\/span> \/><\/span>\n      <Widget<\/span>\n        sources<\/span>={[<\/span>'local<\/span>', 'camera<\/span>']}\n        cloudName<\/span>={process.env.CLOUD_NAME}<\/span>\n        uploadPreset<\/span>={process.env.UPLOAD_PRESET}<\/span>\n        buttonText<\/span>={<\/span>'Add<\/span> Video<\/span>'}\n        style<\/span>={{<\/span>\n          color:<\/span> 'white<\/span>',\n          border:<\/span> 'none<\/span>',\n          width:<\/span> '120px<\/span>',\n          backgroundColor:<\/span> 'green<\/span>',\n          borderRadius:<\/span> '4px<\/span>',\n          height:<\/span> '25px<\/span>',\n        }}\n        folder<\/span>={<\/span>'subtitled_videos<\/span>'}\n        onSuccess<\/span>={uploadVideoFn}<\/span>\n      \/><\/span>\n    <\/><\/span><\/span>\n  )\n}\n\nexport<\/span> default<\/span> VideoPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
If you run the app now, you\u2019ll be able to see the uploader button and clicking it will open the widget. You can run the app with the following command. Make sure you\u2019re at the root of the project in your terminal.<\/p>\n
$ yarn redwood dev\n<\/code><\/span><\/pre>\n
Going to the video<\/code> route will show you views similar to these.<\/p>\n
\"uploader<\/p>\n
\"uploader<\/p>\n
Now we need to update that uploadVideoFn<\/code>. This is where we\u2019ll save the uploaded video\u2019s URL until we have the subtitle file as well. Add this code to the placeholder function.<\/p>\n
function<\/span> uploadVideoFn<\/span>(results: CloudinaryResult<\/span>) <\/span>{\n  const<\/span> imageInfo = results.info\n\n  setUrl(imageInfo.url)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
There are a couple of things we need to do before you can use this function. First, let\u2019s add a new import to use the state hook in React. So add this to the top of the import list.<\/p>\n
import<\/span> { useState } from<\/span> 'react'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, add the type definition for the data we\u2019ll be using from the Cloudinary response below the import statements.<\/p>\n
interface<\/span> CloudinaryResult<\/span> {\n  info<\/span>: {\n    url: string\n  }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Then right inside of the component, above the uploadVideoFn<\/code>, add the following states. We\u2019ll only use one for now, but we\u2019ll need the other really soon.<\/p>\n
const<\/span> [url, setUrl] = useState<string>(\"\"<\/span>)\nconst<\/span> [srtFile, setSrtFile] = useState<string>(\"\"<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The video uploader is finished now! You can test it out by uploading a video in the browser and checking the state of the app in the developer tools. Now we can move on to the subtitle uploader.<\/p>\n
Uploading the subtitles file<\/h3>\n
We\u2019ll need a way for users to upload new subtitle files along with their videos so we\u2019ll add a button with this functionality and it\u2019ll make a call to the Cloudinary API. This time, let\u2019s start by defining the uploadSubtitleFn<\/code> before we create the file upload input. So let\u2019s add this function below uploadVideoFn<\/code>.<\/p>\n
async<\/span> function<\/span> uploadSubtitleFn<\/span>(e<\/span>) <\/span>{\n  const<\/span> uploadApi = `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUD_NAME}<\/span>\/raw\/upload`<\/span>\n\n  const<\/span> formData = new<\/span> FormData()\n  formData.append('file'<\/span>, e.currentTarget.value)\n  formData.append('upload_preset'<\/span>, process.env.CLOUD_NAME)\n\n  const<\/span> cloudinaryRes = await<\/span> fetch(uploadApi, {\n    method<\/span>: 'POST'<\/span>,\n    body<\/span>: formData,\n  })\n\n  setSrtFile(cloudinaryRes.url)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we can add the file input element that will trigger this function whenever a new .srt<\/code> file gets uploaded. This element will go just below the <Widget><\/code>.<\/p>\n
<input<\/span> type<\/span>=\"file\"<\/span> onChange<\/span>={uploadSubtitleFn}<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
That\u2019s all for the upload functionality. The last thing we need to do is add a button that will handle the creation of a database record with the URLs for the video and subtitles.<\/p>\n
Saving the record<\/h3>\n
We need to update one of the import statements we have. Add the two new objects to this import.<\/p>\n
import<\/span> { MetaTags, useMutation, useQuery } from<\/span> '@redwoodjs\/web'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, let\u2019s define the mutation we need to create a new video record. This will go right below the import statements.<\/p>\n
const<\/span> CREATE_VIDEO_MUTATION = gql`\n  mutation CreateVideoMutation($input: CreateVideoInput!) {\n    createVideo(input: $input) {\n      id\n      url\n      srtFile\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll define the method we\u2019ll use when we\u2019re ready to submit the video. This will go inside the component, right above the useState<\/code> declarations.<\/p>\n
const<\/span> [createVideo] = useMutation(CREATE_VIDEO_MUTATION)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can add one more function that will let us handle video record submissions. This will go just below the uploadSubtitleFn<\/code>.<\/p>\n
function<\/span> createVideoRecord<\/span>(<\/span>) <\/span>{\n  const<\/span> input = {\n    url<\/span>: url,\n    srtFile<\/span>: srtFile,\n  }\n\n  createVideo({ variables<\/span>: { input } })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This calls the GraphQL mutation we created on the back-end earlier and adds the new info to the table. All that\u2019s left is adding the button. We\u2019ll put that below the file input.<\/p>\n
<button<\/span> style<\/span>={{<\/span> display:<\/span> 'block<\/span>' }} onClick<\/span>={createVideoRecord}<\/span>><\/span>Make this video record<\/button<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Whenever this button is clicked, it will attempt to create a new video record so make sure that your states have valid values. This is a great place to practice implementing input validation and error handling. If you run your app at this point with yarn rw dev<\/code>, then you should see something like this.<\/p>\n
\"app<\/p>\n
All that\u2019s left is the query and displaying of the videos we upload with their subtitles!<\/p>\n
Displaying the video with subtitles<\/h3>\n
There\u2019s a GraphQL query that we need to define to get all of the video data. We\u2019ll do that right above the mutation definition.<\/p>\n
const<\/span> GET_VIDEOS = gql`\n  query {\n    videos {\n      url\n      srtFile\n    }\n  }\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we\u2019ll add a few objects from the useQuery<\/code> hook we use to get the data back. Add this line right above the mutation method inside the component.<\/p>\n
...\nconst<\/span> { data, loading } = useQuery(GET_VIDEOS)\nconst<\/span> [createVideo] = useMutation(CREATE_VIDEO_MUTATION)\nconst<\/span> [url, setUrl] = useState<string>(\"\"<\/span>)\n...\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Any time we\u2019re working with loading data on the front-end, it\u2019s a great practice to have something displayed while the data is loading to prevent the app from crashing. That\u2019s where the loading<\/code> value comes in. It tells us if the video data is still being fetched. We\u2019ll add a simple loading element above the return statement.<\/p>\n
if<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>Loading...<\/div<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Lastly, we need to display the videos with their subtitles. To do that, we\u2019ll need to add some <video><\/code> elements for every video returned from the query. This will go below the video record creation button.<\/p>\n
<div<\/span> style<\/span>={{<\/span> display:<\/span> 'block<\/span>' }}><\/span>\n  {data?.videos &&\n    data?.videos.map(image => (\n      <video<\/span>\n        controls<\/span>\n        key<\/span>={image.name}<\/span>\n        style<\/span>={{<\/span> height:<\/span> '500px<\/span>', width:<\/span> '500px<\/span>' }}\n      ><\/span>\n        <source<\/span> src<\/span>={<\/span>`https:<\/span>\/\/res.cloudinary.com<\/span>\/demo<\/span>\/video<\/span>\/upload<\/span>\/l_subtitles:sample_heeir8.srt<\/span>\/elephant_herd.mp4<\/span>`}><\/span><\/source<\/span>><\/span>\n      <\/video<\/span>><\/span>\n    ))\n  }\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using a custom Cloudinary URL with the names of the video and subtitle files we uploaded together. When you reload the page with your app running, you should see something like this.<\/p>\n
\"all<\/p>\n
Now we\u2019re done!<\/p>\n
Finished code<\/h2>\n
You might want to take a look at the complete code over here in the video-subtitles<\/code> folder of this repo<\/a>.<\/p>\n
Or you can check out some of the front-end functionality in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Having subtitles on videos is a crucial step for keeping content online accessible to everyone. The .srt<\/code> are well worth the time to learn how to write. It\u2019s just a specific format you have to follow in a text file. So hopefully this made everything look easy to you and now you can add subtitles to all the videos!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28029,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[337,134,246,371,303],"class_list":["post-28028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accessibility","tag-guest-post","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nAdding Subtitles to Video Content with Redwood<\/title>\n<meta name=\"description\" content=\"You can find subtitles in almost every type of video content. From Netflix to TikTok, subtitles are expected to be there in some form. That's why you'll learn how to make a subtitle file and how to show them on your own videos with Cloudinary in this tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Subtitles to Video Content with Redwood\" \/>\n<meta property=\"og:description\" content=\"You can find subtitles in almost every type of video content. From Netflix to TikTok, subtitles are expected to be there in some form. That's why you'll learn how to make a subtitle file and how to show them on your own videos with Cloudinary in this tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T19:02:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4928\" \/>\n\t<meta property=\"og:image:height\" content=\"3264\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adding Subtitles to Video Content with Redwood\",\"datePublished\":\"2022-03-21T19:02:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA\",\"keywords\":[\"Accessibility\",\"Guest Post\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\",\"name\":\"Adding Subtitles to Video Content with Redwood\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA\",\"datePublished\":\"2022-03-21T19:02:58+00:00\",\"description\":\"You can find subtitles in almost every type of video content. From Netflix to TikTok, subtitles are expected to be there in some form. That's why you'll learn how to make a subtitle file and how to show them on your own videos with Cloudinary in this tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA\",\"width\":4928,\"height\":3264},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Subtitles to Video Content with Redwood\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding Subtitles to Video Content with Redwood","description":"You can find subtitles in almost every type of video content. From Netflix to TikTok, subtitles are expected to be there in some form. That's why you'll learn how to make a subtitle file and how to show them on your own videos with Cloudinary in this tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/","og_locale":"en_US","og_type":"article","og_title":"Adding Subtitles to Video Content with Redwood","og_description":"You can find subtitles in almost every type of video content. From Netflix to TikTok, subtitles are expected to be there in some form. That's why you'll learn how to make a subtitle file and how to show them on your own videos with Cloudinary in this tutorial.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T19:02:58+00:00","og_image":[{"width":4928,"height":3264,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/"},"author":{"name":"","@id":""},"headline":"Adding Subtitles to Video Content with Redwood","datePublished":"2022-03-21T19:02:58+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA","keywords":["Accessibility","Guest Post","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/","name":"Adding Subtitles to Video Content with Redwood","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA","datePublished":"2022-03-21T19:02:58+00:00","description":"You can find subtitles in almost every type of video content. From Netflix to TikTok, subtitles are expected to be there in some form. That's why you'll learn how to make a subtitle file and how to show them on your own videos with Cloudinary in this tutorial.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA","width":4928,"height":3264},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-subtitles-to-video-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Subtitles to Video Content with Redwood"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925637\/Web_Assets\/blog\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783\/e3075709852bae28eff5f9d030e715c097b854a4-4928x3264-1_28029dc783.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28028"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28029"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}