Adding subtitles seems automatic when using video players but is a complex task when we have to do it in our own apps. Let us learn how we can easily do them without requiring expensive software or server-driven solutions.

The completed project is available on Codesandbox.

You can find the full codebase on my Github

To be able to follow along with this tutorial, working knowledge of HTML, CSS and JavaScript is a requirement. Vue.Js knowledge is not required but is definitely a plus.

For this project, we will use Nuxt.Js, a simple yet powerful Vue.Js framework. To get started, ensure you have YARN or NPM v5.2+/v6.1+ installed. Open the terminal in your preferred working directory and run the following setup command.

yarn create nuxt-app nuxtjs-video-subtitles
# OR
npm run create nuxt-app nuxtjs-video-subtitles
Code language: PHP (php)

This will result in a set of setup questions. Here are our recommended defaults.

Once the setup is complete, you may enter and run the project on localhost:3000.

cd nuxtjs-video-subtitles

yarn dev
# OR
npm run dev
Code language: PHP (php)

Cloudinary is a very powerful media management platform. We will be using it to add subtitles to our project. First, we need to upload the video file and the subtitle file. If you do not have an account, create one here.

Proceed to your Media Library and add the following folder to a new folder called nuxtjs-video-subtitles.

• video
• subtitles.srt

The resultant folder should be similar to this one:

We now need to install the Nuxt.Js recommended plugins, @nuxtjs/cloudinary. Run the following command in the project to install the plugin.

yarn add @nuxtjs/cloudinary
# OR
npm run add @nuxtjs/cloudinary
Code language: CSS (css)

We now need to add it to our project’s registered modules.

// nuxt.config.js
export default {
  ...
  modules: [
    '@nuxtjs/cloudinary'
  ],
  ...
}
Code language: JavaScript (javascript)

This is followed by configuring our Cloudinary instance to point to our Cloudinary account. First, we need to set our cloud name in our .env file. This is the file that contains our environmental variables, these are values that we do not want to be stored in our code. You can obtain your cloud name on your dashboard.

Create a .env file in the project root and store the value.

<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>
Code language: HTML, XML (xml)

We can now configure our setup

// nuxt.config.js
export default {
  ...
  cloudinary: {
    cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
    useComponent: true
  }
}
Code language: JavaScript (javascript)

As a developer, when adding subtitles to a video, the default route is to add an srt file reader and manually add the text to the video. But Cloudinary has us covered through a transformation specifically for attaching subtitles.

<!-- pages/index.vue -->
<template>
  <cld-video 
    :publicId="video" 
    controls="true" 
    autoplay="true"
    >
    <cld-transformation :overlay="{
            publicId: subtitle, 
            resourceType: 'subtitles'
    }" />
    <cld-transformation flags="layer_apply" />
  </cld-video>
</template>

<script>
export default {
  data(){
    return {
      video:"nuxtjs-video-subtitles/video",
      subtitle:"nuxtjs-video-subtitles/subtitles.srt",
    }
  }
}
</script>
Code language: HTML, XML (xml)

The above code renders the video and attaches the subtitles to the video. Thus, when we play the video we should see the subtitles showing.

We are now able to easily add subtitles to our videos. To learn more about this specific transformation, feel free to review the official documentation