Optimizing videos dynamically in a NuxtJS app

Eugene Musebe

An immense amount of bandwidth is wasted on a daily basis loading video content which is mostly not optimized for our app users. This becomes even worse if the video autoplay or is in the background thus offering very little information to our app users. Optimizing videos is an intensive and technical task that many cannot easily do. Let us build a tool that dynamically optimized our videos in a Nuxt.Js app.

Codesandbox

The completed project is available on Codesandbox.

You can find the full codebase on my Github

Prerequisites

In order to follow along with this article, Vue.Js knowledge is not required but would be a plus. Entry-level HTML, CSS, and JavaScript knowledge is required.

Nuxt.Js App Setup

Nuxt.Js is our VueJs framework of choice due to its ease of use. Before proceeding, ensure you have Yarn or npm v5.2+/v6.1+ installed. Open the terminal in your preferred working directory.

1yarn create nuxt-app nuxtjs-automatic-video-optimization
2# OR
3npx create-nuxt-app nuxtjs-automatic-video-optimization
4# OR
5npm init nuxt-app nuxtjs-automatic-video-optimization

Here are our recommendations for the setup questions to proceed:

Project name: nuxtjs-automatic-video-optimization Programming language: JavaScript Package manager: Yarn UI framework: Tailwind CSS Nuxt.js modules: N/A Linting tools: N/A Testing frameworks: None Rendering mode: Universal (SSR/SSG) Deployment target: Server (Node.js hosting) Development tools: N/A What is your Github username? <your-github-username> Version control system: Git

Enter and run the project on http://localhost:3000

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

Cloudinary setup

We are going to use Cloudinary to optimize images through its Nuxt.JS SDK. If you do not have a Cloudinary account, feel free to create one here. We are now going to store our account cloud name in our .env file. This is so that we do not have it in our codebase along with other sensitive details. We need to create it first.

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

Let us install the SDK.

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

Once the installation is done, we need to add it to the modules section and configure it.

1// nuxt.config.js
2export default {
3 ...
4 modules: [
5 '@nuxtjs/cloudinary'
6 ],
7 ...
8 cloudinary: {
9 cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
10 }
11}

The video we are going to optimize also needs to be stored on an account. In your Media Library create a folder called nuxtjs-automatic-video-optimisation. Within the folder, upload the following video: pexels-gabby-k-6915751.mp4

Optimizing the video

Before we optimize the images, we need to understand the optimization options we have. Let us add them to our page state.

1// pages/index.vue
2<script>
3export default {
4 data(){
5 return {
6 qualityOptions: [
7 {
8 label:"The optimal balance between file size and visual quality. By default, this is the same as q_auto:good.",
9 value:"auto"
10 },
11 {
12 label:"Less aggressive algorithm. Generates bigger files with potentially better visual quality.",
13 value:"auto:best"
14 },
15 {
16 label:"Ensuring a relatively small file size with good visual quality. Example of a target audience: stock media sites that display videos with a high visual quality.",
17 value:"auto:good"
18 },
19 {
20 label:"More aggressive algorithm, which results in smaller files of slightly lower visual quality. Example of a target audience: popular sites and social networks with a huge amount of traffic.",
21 value:"auto:eco"
22 },
23 {
24 label:"Most aggressive algorithm, which results in the smallest files of low visual quality. Example of a target audience: sites using thumbnail preview videos that then link to higher quality videos.",
25 value:"auto:low"
26 },
27 ]
28 };
29 },
30}

Not that we have stored the quality optimization options, let us create a method to receive the quality value and return an optimized URL. We will pass the value to the quality option.

1// pages/index.vue
2<script>
3export default {
4 ...
5 methods:{
6 getVideoUrl(quality){
7 return this.$cloudinary.video
8 .url(
9 'nuxtjs-automatic-video-optimisation/pexels-gabby-k-6915751',
10 {
11 quality ,
12 crop: 'fill',
13 width: 300,
14 height:300,
15 format: 'mp4'
16 }
17 );
18 }
19 }
20}
21</script>

Rendering our videos

Now that we can get the optimized video URL, let us render the videos in our UI.

1// pages/index.vue
2<template>
3 <div>
4 <h1>Automatic video optimisation</h1>
5 <h2>Video by Monstera from Pexels</h2>
6 <div>
7 <div v-for="quality in qualityOptions" :key="quality.value">
8 <video :src="getVideoUrl(quality.value)" controls="false" autoplay="true" loop="true"/>
9 <p>Quality: {{quality.value}}</p>
10 <p>{{quality.label}}</p>
11 </div>
12 </div>
13 </div>
14</template>

You should end up with a visual similar to this one.

Conclusion

We are now able to optimize videos before we render them in our apps and websites automatically. To learn more about this feature, feel free to read more on the Cloudinary documentation.

Eugene Musebe

Software Developer

I’m a full-stack software developer, content creator, and tech community builder based in Nairobi, Kenya. I am addicted to learning new technologies and loves working with like-minded people.