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-subtitles2# OR3npm 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-subtitles23yarn dev4# OR5npm 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
.
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/cloudinary2# OR3npm run add @nuxtjs/cloudinary
We now need to add it to our project's registered modules.
1// nuxt.config.js2export 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.js2export default {3 ...4 cloudinary: {5 cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,6 useComponent: true7 }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-video4 :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>1516<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