Skip to content

Optimizing videos dynamically in a NuxtJS app

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.

The completed project is available on Codesandbox.

You can find the full codebase on my Github

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 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.

yarn create nuxt-app nuxtjs-automatic-video-optimization
# OR
npx create-nuxt-app nuxtjs-automatic-video-optimization
# OR
npm init nuxt-app nuxtjs-automatic-video-optimization
Code language: PHP (php)

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

cd nuxtjs-automatic-video-optimization

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

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.

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

Let us install the SDK.

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

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

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

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

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

// pages/index.vue
<script>
export default {
  data(){
    return {
      qualityOptions: [
        {
          label:"The optimal balance between file size and visual quality. By default, this is the same as q_auto:good.",
          value:"auto"
        },
        {
          label:"Less aggressive algorithm. Generates bigger files with potentially better visual quality.",
          value:"auto:best"
        },
        {
          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.",
          value:"auto:good"
        },
        {
          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.",
          value:"auto:eco"
        },
        {
          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.",
          value:"auto:low"
        },
      ]
    };
  },
}
Code language: HTML, XML (xml)

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.

// pages/index.vue
<script>
export default {
  ...
  methods:{
    getVideoUrl(quality){
      return this.$cloudinary.video
                .url(
                  'nuxtjs-automatic-video-optimisation/pexels-gabby-k-6915751', 
                  { 
                    quality ,
                    crop: 'fill', 
                    width: 300, 
                    height:300,
                    format: 'mp4'
                  }
                );
    }
  }
}
</script>
Code language: HTML, XML (xml)

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

// pages/index.vue
<template>
  <div>
    <h1>Automatic video optimisation</h1>
    <h2>Video by Monstera from Pexels</h2>
    <div>
      <div v-for="quality in qualityOptions" :key="quality.value">
        <video :src="getVideoUrl(quality.value)" controls="false" autoplay="true" loop="true"/>
        <p>Quality: {{quality.value}}</p>
        <p>{{quality.label}}</p>
      </div>
    </div>
  </div>
</template>
Code language: HTML, XML (xml)

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

Videos UI view

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.

Back to top

Featured Post