Interactivity is a big part of today's online pages. These responsibilities include gathering information on user involvement, processing form submissions, and controlling the interactivity of media assets.
In this tutorial, we will discuss how to trigger a feedback form on video completion in Nuxt.js.
Sandbox
This project was completed in a Codesandbox. To get started quickly, fork the Codesandbox or run the project.
GitHub Repository: https://github.com/Olanetsoft/video-event-trigger-in-nuxt
Prerequisite
The knowledge of JavaScript and Vue.js is needed for this post. The knowledge of Nuxt.js is not required but preferred.
Getting Started with Nuxtjs
Nuxt.js provides the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale the application with confidence.
It is extensible, with a robust module ecosystem and hooks engine that makes it simple to integrate your REST or GraphQL endpoints, favourite CMS, CSS frameworks, and other third-party applications.
Project Setup and Installation
To create a new project, we will use the command below to scaffold a new project:
1npx create-nuxt-app <project-name>
A series of prompts will appear as a result of the command. Here are the defaults we recommend:
Next, we need to navigate the project directory and start the development server using the command below.
1cd <project name> && yarn dev
Nuxt.js will start a hot-reloading development environment accessible by default at http://localhost:3000
Cloudinary Video Player Installation
We need to detect and respond when the status of a video player changes; thus, we will be relying on the Cloudinary Video Player for customization and integration.
Cloudinary video player is a JavaScript-based HTML5 video player that comes with a slew of helpful customization and integration features, as well as monetization and analytics support.
The video player's assets will be added to our nuxt.config.js
in the link
and script
section of the file using the following snippet:
1// nuxt.config.js23 export default {4 head: {5 ...6 link: [7 ...8 {9 rel: 'stylesheet',10 href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css'11 }12 ],13 script: [14 {15 src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js'16 },17 {18 src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js'19 },20 ],21 },22 };
We need to save our Cloudinary cloud name to refer to it from any file. In the following step, it will be saved as an environmental variable in the global .env
file at the project root.
You can get your cloud name from your Cloudinary dashboard by signing up for a Cloudinary Account.
Create a .env
file at the root of the project with the command touch .env
and update it with the following snippet:
1NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>
We can now create our video player by updating pages/index.vue
with the following code snippet:
1<template>2 <div class="flex justify-center items-center h-screen space-x-10">3 <div class="rounded overflow-hidden shadow-lg mb-4 content-center">4 <div class="px-6 py-4 pb-2">5 <div class="font-bold text-xl mb-2">Feedback Form Trigger</div>6 <video7 id="video-player"8 controls9 autoplay10 muted11 width="500px"12 class="width-full"13 ></video>14 </div>15 </div>16 </div>17 </template>1819 <script>20 export default {21 data() {22 return {23 cld: null,24 player: null,25 video: "samples/animals/testvid",26 };27 },2829 mounted() {30 this.cld = cloudinary.Cloudinary.new({31 cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,32 secure: true,33 });3435 this.player = this.cld.videoPlayer("video-player", {36 analytics: {37 events: ["ended"],38 },39 });4041 this.player.source(this.video);42 },43 name: "IndexPage",44 };45 </script>
In the code snippet above, we established a Cloudinary instance, used it to initialize the video player, and set up the video source in our mounted lifecycle hook.
We should have something similar to the image below:
Trigger a Feedback Form based on Video State
We have successfully integrated our video player, and we can set up a trigger action for when the video has ended. This is accomplished by simply adding the events to the analytics setting in the video player's setup. The video state is then stored in the page’s state with the aid of event listeners.
Next, We will update the pages/index.vue
with the code snippet below:
1<template>2 <!-- markup goes here -->3 </template>45 <script>6 export default {7 data() {8 return {9 //...10 ended: null,11 };12 },1314 mounted() {15 //...16 this.player.on("ended", () => {17 this.ended = true;18 });19 },20 //...21 };22 </script>
In the code snippet above, we created a state variable ended
that keeps track of the event whenever our video ends.
Next, we will create a Form.vue
file inside the components
folder to display our feedback form with the snippet below:
1<template>2 <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">3 <div class="mb-4">4 <label class="block text-gray-700 text-sm font-bold mb-2" for="name">5 Name6 </label>7 <input8 class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"9 id="name"10 type="text"11 placeholder="name"12 ref="name"13 />14 </div>15 <div class="mb-6">16 <label class="block text-gray-700 text-sm font-bold mb-2" for="feedback">17 Video Feedback18 </label>19 <textarea20 class="21 form-control22 block23 w-full24 px-325 py-1.526 text-base27 font-normal28 text-gray-70029 bg-white bg-clip-padding30 border border-solid border-gray-30031 rounded32 transition33 ease-in-out34 m-035 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none36 "37 id="exampleFormControlTextarea1"38 rows="3"39 placeholder="Your message"40 ></textarea>41 </div>42 <div class="flex items-center justify-between">43 <button44 class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"45 type="button"46 @click.prevent="getFormValues()"47 >48 Submit49 </button>50 </div>51 </form>52 </template>5354 <script>55 export default {56 data() {57 return {58 name: "",59 feedback: "",60 videoEnded: "",61 };62 },63 methods: {64 getFormValues() {65 alert(`Feedback received successfully!`);66 console.log(this.$refs.name.value);67 console.log(this.$refs.feedback.value);68 },69 },70 };71 </script>
Next, we update pages/index.vue
by importing the Form.vue
component with the following snippet below:
1<template>2 <div class="flex justify-center items-center h-screen space-x-10">3 <div class="rounded overflow-hidden shadow-lg mb-4 content-center">4 <div class="px-6 py-4 pb-2">5 <div class="font-bold text-xl mb-2">Feedback Form Trigger</div>6 <video7 id="video-player"8 controls9 autoplay10 muted11 width="500px"12 class="width-full"13 ></video>14 </div>15 </div>16 <!-- Form Added here -->17 <Form v-if="ended"></Form>18 </div>19 </template>2021 <script>22 import Form from "../components/Form.vue";23 //...24 components: {25 Form,26 },27 name: "IndexPage",28 };29 </script>
In the snippet above, we use the v-if="ended"
attribute in the Form imported to show the feedback form when the ended
variable is true
.
Next, testing our application by opening a local development server, we should have something similar to what is shown below after the video ends.
Conclusion
This article addressed triggering a feedback form on video Completion in Nuxt.js. Once a video has finished playing, we render a feedback form to receive the user's input/feedback.
Resources
You may find these resources helpful.