Depending on the type of experience we aim for, normal videos might not be adequate for our users. We might need additional interactivity in our videos for a better experience. Let us explore how we can achieve this in an easy way.

Codesandbox

Check the sandbox demo on Codesandbox.

You can also get the project GitHub repo using Github.

Prerequisites

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

Nuxt.Js App setup

For this tutorial, we will be using Nuxt. Js, a performant and simple-to-use 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 command.

1yarn create nuxt-app nuxtjs-interactive-videos
2# OR
3npx create-nuxt-app nuxtjs-interactive-videos
4# OR
5npm init nuxt-app nuxtjs-interactive-videos

The above command will lead to a set of setup questions. Here are the settings we used and recommend.

Once the setup is complete, you may now enter and run your project.

1cd nuxtjs-interactive-videos
2
3yarn dev
4# OR
5npm run dev

This will run your project on localhost:3000.

Cloudinary account setup

Once the app is complete, we need to log in and upload some videos on Cloudinary. Cloudinary is a media-management platform that allows us to make the most of our assets through its comprehensive set of SDKs and APIs.

If you do not have an account, register here. Once registered, and logged in, navigate to your media library and create a folder called nuxtjs-interactive-videos. In this folder, upload the following videos:

You should have a resultant folder that looks similar to this one:

We now need to add a reference to our account into our codebase. Proceed to your dashboard and copy your account's cloud-name.

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

We are now ready to add videos to our codebase.

Adding the video player

Now that our codebase and our Cloudinary account are both ready, we can now add a video player to our codebase. First, let us add the required source files to our code. Add the following to the head section of the nuxt.config.js file.

1// nuxt.config.js
2export default {
3    head: {
4        ...
5        link: [
6            ...
7            { rel: 'stylesheet', href: 'https://unpkg.com/cloudinary-video-player@1.9.0/dist/cld-video-player.min.css' }
8        ],
9        script: [
10            { src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js' },
11            { src: 'https://unpkg.com/cloudinary-video-player@1.9.0/dist/cld-video-player.min.js' },
12        ],
13    }
14    ...
15}

Let us now add the video player to our app. We start with some basic HTML.

1<!-- pages/index.vue -->
2<template>
3  <div>
4    <video
5      id="player"
6      controls
7      muted
8      autoplay
9    >
10    </video>
11    Videos by cottonbro from Pexels
12  </div>
13</template>

Now we can add the corresponding JavaScript which initializes a Cloudinary video player and configures the sources.

1// pages/index.vue
2<script>
3export default {
4  data(){
5    return {
6      player:null,
7      mainSouce: "nuxtjs-interactive-videos/pexels-cottonbro-10678925",
8    };
9  },
10  mounted(){
11    this.player = cloudinary.videoPlayer(
12      'player',
13      {
14        cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
15        transformations: {
16          quality: 50
17        }
18      }
19    );
20
21    this.player.source(this.mainSouce);
22  }
23}
24</script>

With the above code, we can now see a simple video player.

Making our video interactive

To make our video interactive, we add our interactionAreas to the source declaration. Set enabled to true as well as define the template areas. We are also going to add a listener to the onClick event. The listener will change the source using the event.zoom method.

Let us view the JavaScript required to achieve this.

1// pages/index.vue
2<script>
3export default {
4  data(){
5    return {
6      player:null,
7      mainSouce: "nuxtjs-interactive-videos/pexels-cottonbro-10678925",
8      clickSources:{
9        man: "nuxtjs-interactive-videos/pexels-cottonbro-10679050",
10        woman: "nuxtjs-interactive-videos/pexels-cottonbro-10678927",
11        grass: "nuxtjs-interactive-videos/pexels-cottonbro-10678930",
12      }
13    };
14  },
15  mounted(){
16    this.player = cloudinary.videoPlayer(
17      'player',
18      {
19        cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
20        transformations: {
21          quality: 50
22        }
23      }
24    );
25
26    this.player.source(
27      this.mainSouce,
28      {
29        interactionAreas: {
30          enable: true,
31          template: [
32            {
33                left : 35,
34                top: 50,
35                width: 20,
36                height: 20,
37                id: 'man'
38            },
39            {
40                left : 50,
41                top: 50,
42                width: 20,
43                height : 20,
44                id: 'woman'
45            },
46            {
47                left : 40,
48                top: 70,
49                width: 20,
50                height : 20,
51                id: 'grass'
52            }
53          ],
54          onClick: (event) => event.zoom(this.clickSources[event.item.id])
55        }
56      });
57  }
58}
59</script>

We should now have an outcome similar to the one below. When any of the interactive areas are clicked, the video source will change.

Conclusion

With the above steps, we have successfully set up our interactive video. To learn more about the capabilities and flexibility of interactive videos, feel free to review the documentation.

Interactive Videos in NuxtJS