Purpose

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.

Codesandbox

The completed project is available on Codesandbox.

You can find the full codebase on my Github

Knowledge requirements

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.

Project setup

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.

1yarn create nuxt-app nuxtjs-video-subtitles
2# OR
3npm run create nuxt-app nuxtjs-video-subtitles

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.

1cd nuxtjs-video-subtitles
2
3yarn dev
4# OR
5npm run dev

Cloudinary setup

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.

1yarn add @nuxtjs/cloudinary
2# OR
3npm run add @nuxtjs/cloudinary

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

1// nuxt.config.js
2export default {
3  ...
4  modules: [
5    '@nuxtjs/cloudinary'
6  ],
7  ...
8}

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.

1<!-- .env -->
2NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>

We can now configure our setup

1// nuxt.config.js
2export default {
3  ...
4  cloudinary: {
5    cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
6    useComponent: true
7  }
8}

Adding subtitles to our video

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.

1<!-- pages/index.vue -->
2<template>
3  <cld-video 
4    :publicId="video" 
5    controls="true" 
6    autoplay="true"
7    >
8    <cld-transformation :overlay="{
9            publicId: subtitle, 
10            resourceType: 'subtitles'
11    }" />
12    <cld-transformation flags="layer_apply" />
13  </cld-video>
14</template>
15
16<script>
17export default {
18  data(){
19    return {
20      video:"nuxtjs-video-subtitles/video",
21      subtitle:"nuxtjs-video-subtitles/subtitles.srt",
22    }
23  }
24}
25</script>

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.

Conclusion

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