{"id":27797,"date":"2022-02-08T01:39:57","date_gmt":"2022-02-08T01:39:57","guid":{"rendered":"http:\/\/Trigger-a-Feedback-Form-on-Video-Completion-in-Nuxtjs"},"modified":"2025-09-26T14:03:22","modified_gmt":"2025-09-26T21:03:22","slug":"trigger-a-feedback-form-on-video-completion-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/trigger-a-feedback-form-on-video-completion-in-nuxtjs\/","title":{"rendered":"Trigger a Feedback Form on Video Completion in Nuxtjs"},"content":{"rendered":"

Interactivity is a big part of today\u2019s online pages. These responsibilities include gathering information on user involvement, processing form submissions, and controlling the interactivity of media assets.<\/p>\n

In this tutorial, we will discuss how to trigger a feedback form on video completion in Nuxt.js.<\/p>\n

Sandbox<\/h2>\n

This project was completed in a Codesandbox<\/a>. To get started quickly, fork the Codesandbox<\/a> or run the project.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

GitHub Repository: https:\/\/github.com\/Olanetsoft\/video-event-trigger-in-nuxt<\/a><\/p>\n

Prerequisite<\/h1>\n

The knowledge of JavaScript and Vue.js is needed for this post. The knowledge of Nuxt.js is not required but preferred.<\/p>\n

Getting Started with Nuxtjs<\/h1>\n

Nuxt.js<\/a> provides the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale the application with confidence.<\/p>\n

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.<\/p>\n

Project Setup and Installation<\/h1>\n

To create a new project, we will use the command below to scaffold a new project:<\/p>\n

    npx create-nuxt-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
A series of prompts will appear as a result of the command. Here are the defaults we recommend:<\/p>\n
\"Nuxtjs-Setup\"<\/p>\n
Next, we need to navigate the project directory and start the development server using the command below.<\/p>\n
    cd <project<\/span> name<\/span>><\/span> && yarn dev\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Nuxt.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/code><\/p>\n
Cloudinary Video Player Installation<\/h1>\n
We need to detect and respond when the status of a video player changes; thus, we will be relying on the Cloudinary Video Player<\/a> for customization and integration.<\/p>\n
Cloudinary video player<\/a> 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.<\/p>\n
The video player\u2019s assets will be added to our nuxt.config.js<\/code> in the link<\/code> and script<\/code> section of the file using the following snippet:<\/p>\n
\n    \/\/ nuxt.config.js<\/span>\n    \n    export<\/span>  default<\/span>  {\n      head<\/span>:  {\n          ...\n      link: [\n          ...\n      {\n        rel<\/span>:  'stylesheet'<\/span>, \n        href<\/span>:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'<\/span>  \n      }\n            ],\n      script<\/span>:  [\n      { \n      src<\/span>:  'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'<\/span> \n      },\n      { \n      src<\/span>:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'<\/span>\n      },\n              ],\n      },\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
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<\/code> file at the project root.<\/p>\n
Create a .env<\/code> file at the root of the project with the command touch .env<\/code> and update it with the following snippet:<\/p>\n
    NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We can now create our video player by updating pages\/index.vue<\/code> with the following code snippet:<\/p>\n
\n    <template<\/span>><\/span>\n      <div<\/span> class<\/span>=\"flex justify-center items-center h-screen space-x-10\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"rounded overflow-hidden shadow-lg mb-4 content-center\"<\/span>><\/span>\n          <div<\/span> class<\/span>=\"px-6 py-4 pb-2\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"font-bold text-xl mb-2\"<\/span>><\/span>Feedback Form Trigger<\/div<\/span>><\/span>\n            <video<\/span>\n              id<\/span>=\"video-player\"<\/span>\n              controls<\/span>\n              autoplay<\/span>\n              muted<\/span>\n              width<\/span>=\"500px\"<\/span>\n              class<\/span>=\"width-full\"<\/span>\n            ><\/span><\/video<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    \n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n      data() {\n        return<\/span> {\n          cld<\/span>: null<\/span>,\n          player<\/span>: null<\/span>,\n          video<\/span>: \"samples\/animals\/testvid\"<\/span>,\n        };\n      },\n    \n      mounted() {\n        this<\/span>.cld = cloudinary.Cloudinary.new({\n          cloud_name<\/span>: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n          secure<\/span>: true<\/span>,\n        });\n    \n        this<\/span>.player = this<\/span>.cld.videoPlayer(\"video-player\"<\/span>, {\n          analytics<\/span>: {\n            events<\/span>: [\"ended\"<\/span>],\n          },\n        });\n    \n        this<\/span>.player.source(this<\/span>.video);\n      },\n      name<\/span>: \"IndexPage\"<\/span>,\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
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.<\/p>\n
We should have something similar to the image below:<\/p>\n
\"Nuxtjs\"<\/p>\n
Trigger a Feedback Form based on Video State<\/h1>\n
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\u2019s setup. The video state is then stored in the page\u2019s state with the aid of event listeners.<\/p>\n
Next, We will update the pages\/index.vue<\/code> with the code snippet below:<\/p>\n
    <template<\/span>><\/span>\n      <!-- markup goes here --><\/span>\n    <\/template<\/span>><\/span>\n    \n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n      data() {\n        return<\/span> {\n         \/\/...<\/span>\n          ended<\/span>: null<\/span>,\n        };\n      },\n    \n      mounted() {\n        \/\/...<\/span>\n        this<\/span>.player.on(\"ended\"<\/span>, () => {\n          this<\/span>.ended = true<\/span>;\n        });\n      },\n      \/\/...<\/span>\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the code snippet above, we created a state variable ended<\/code> that keeps track of the event whenever our video ends.<\/p>\n
Next, we will create a Form.vue<\/code> file inside the components<\/code> folder to display our feedback form with the snippet below:<\/p>\n
    <template<\/span>><\/span>\n      <form<\/span> class<\/span>=\"bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"mb-4\"<\/span>><\/span>\n          <label<\/span> class<\/span>=\"block text-gray-700 text-sm font-bold mb-2\"<\/span> for<\/span>=\"name\"<\/span>><\/span>\n            Name\n          <\/label<\/span>><\/span>\n          <input<\/span>\n            class<\/span>=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"<\/span>\n            id<\/span>=\"name\"<\/span>\n            type<\/span>=\"text\"<\/span>\n            placeholder<\/span>=\"name\"<\/span>\n            ref<\/span>=\"name\"<\/span>\n          \/><\/span>\n        <\/div<\/span>><\/span>\n        <div<\/span> class<\/span>=\"mb-6\"<\/span>><\/span>\n          <label<\/span> class<\/span>=\"block text-gray-700 text-sm font-bold mb-2\"<\/span> for<\/span>=\"feedback\"<\/span>><\/span>\n            Video Feedback\n          <\/label<\/span>><\/span>\n            <textarea<\/span>\n          class<\/span>=\"\n            form-control\n            block\n            w-full\n            px-3\n            py-1.5\n            text-base\n            font-normal\n            text-gray-700\n            bg-white bg-clip-padding\n            border border-solid border-gray-300\n            rounded\n            transition\n            ease-in-out\n            m-0\n            focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none\n          \"<\/span>\n          id<\/span>=\"exampleFormControlTextarea1\"<\/span>\n          rows<\/span>=\"3\"<\/span>\n          placeholder<\/span>=\"Your message\"<\/span>\n        ><\/span><\/textarea<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <div<\/span> class<\/span>=\"flex items-center justify-between\"<\/span>><\/span>\n          <button<\/span>\n            class<\/span>=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline\"<\/span>\n            type<\/span>=\"button\"<\/span>\n            @click.prevent<\/span>=\"getFormValues()\"<\/span>\n          ><\/span>\n            Submit\n          <\/button<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/form<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    \n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n      data() {\n        return<\/span> {\n          name<\/span>: \"\"<\/span>,\n          feedback<\/span>: \"\"<\/span>,\n          videoEnded<\/span>: \"\"<\/span>,\n        };\n      },\n      methods<\/span>: {\n        getFormValues() {\n          alert(`Feedback received successfully!`<\/span>);\n          console<\/span>.log(this<\/span>.$refs.name.value);\n          console<\/span>.log(this<\/span>.$refs.feedback.value);\n        },\n      },\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next, we update pages\/index.vue<\/code> by importing the Form.vue<\/code> component with the following snippet below:<\/p>\n
    <template<\/span>><\/span>\n      <div<\/span> class<\/span>=\"flex justify-center items-center h-screen space-x-10\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"rounded overflow-hidden shadow-lg mb-4 content-center\"<\/span>><\/span>\n          <div<\/span> class<\/span>=\"px-6 py-4 pb-2\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"font-bold text-xl mb-2\"<\/span>><\/span>Feedback Form Trigger<\/div<\/span>><\/span>\n            <video<\/span>\n              id<\/span>=\"video-player\"<\/span>\n              controls<\/span>\n              autoplay<\/span>\n              muted<\/span>\n              width<\/span>=\"500px\"<\/span>\n              class<\/span>=\"width-full\"<\/span>\n            ><\/span><\/video<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <!-- Form Added here --><\/span>\n        <Form<\/span> v-if<\/span>=\"ended\"<\/span>><\/span><\/Form<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    \n    <script<\/span>><\/span>\n    import<\/span> Form from<\/span> \"..\/components\/Form.vue\"<\/span>;\n      \/\/...<\/span>\n      components: {\n        Form,\n      },\n      name<\/span>: \"IndexPage\"<\/span>,\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
In the snippet above, we use the v-if="ended"<\/code> attribute in the Form imported to show the feedback form when the ended<\/code> variable is true<\/code>.<\/p>\n
Next, testing our application by opening a local development server, we should have something similar to what is shown below after the video ends.<\/p>\n
\"Nuxtjs-Result\"<\/p>\n
Conclusion<\/h1>\n
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\u2019s input\/feedback.<\/p>\n
Resources<\/h1>\n
You may find these resources helpful.<\/p>\n
You can get your cloud name from your Cloudinary dashboard<\/a> by signing up for a Cloudinary Account.<\/p>\n