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-videos2# OR3npx create-nuxt-app nuxtjs-interactive-videos4# OR5npm 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-videos23yarn dev4# OR5npm 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:
- pexels-cottonbro-10678930
- pexels-cottonbro-10678927
- pexels-cottonbro-10679050
- pexels-cottonbro-10678925
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.js2export 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 <video5 id="player"6 controls7 muted8 autoplay9 >10 </video>11 Videos by cottonbro from Pexels12 </div>13</template>
Now we can add the corresponding JavaScript which initializes a Cloudinary video player and configures the sources.
1// pages/index.vue2<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: 5017 }18 }19 );2021 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.vue2<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: 5022 }23 }24 );2526 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.