{"id":28308,"date":"2021-04-14T17:22:14","date_gmt":"2021-04-14T17:22:14","guid":{"rendered":"http:\/\/Video-events-trigger-on-a-Next.js-Page"},"modified":"2025-03-02T15:25:07","modified_gmt":"2025-03-02T23:25:07","slug":"video-events-trigger-on-a-next-js-page","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/video-events-trigger-on-a-next-js-page\/","title":{"rendered":"Video events trigger on a Next.js Page"},"content":{"rendered":"

Interactivity is at the backbone of modern web pages. This includes collecting information on user interaction, handling form submissions, and managing interactivity on media assets.<\/p>\n

This post discusses how to handle user interface interactions with events from a Video on a Next.js web page.<\/p>\n

Next.js is a modern React.js framework for building high-performance web applications.<\/p>\n

Try it out<\/h2>\n

We completed this project in CodeSandbox<\/a>. You can fork the CodeSandbox project or run the code to get started quickly.<\/p>\n<\/div>\n \n

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

Prerequisites & Installation<\/h2>\n

For this post, knowledge of JavaScript and React.js is required. The knowledge of Next.js isn\u2019t mandatory, but preferred.<\/p>\n

To create a new project, we use the create next-app<\/code> command to scaffold a new project. Using yarn, we run:<\/p>\n

    yarn create next-app\n<\/code><\/span><\/pre>\n
A prompt appears to enter the project name, which we do to complete the project creation.<\/p>\n
Alternatively, we could use NPX with the command:<\/p>\n
    npx create-next-app\n<\/code><\/span><\/pre>\n
The boilerplate project scaffolds a landing page with styling using CSS modules.<\/p>\n
For this project, we\u2019ll use the Cloudinary-React package<\/a> to render a video player whose video source is a video stored on Cloudinary. The video is delivered via an optimized content delivery network (CDN), and can be modified using Cloudinary\u2019s robust transformation features.<\/p>\n
We install the cloudinary-react package using yarn:<\/p>\n
    yarn add cloudinary-react\n<\/code><\/span><\/pre>\n
Video player utilization<\/h2>\n
The cloudinary-react package exports two named components, Video<\/code> and CloudinaryContext<\/code>, which we\u2019ll use to render the video player.<\/p>\n
On the home page whose component is defined in pages\/index.js<\/code>, we import and render the video player with:<\/p>\n
    import<\/span> { Video, CloudinaryContext, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span>><\/span>\n          Hello World.{\" \"}\n          <CloudinaryContext<\/span> cloudName<\/span>=\"chuloo\"<\/span>><\/span>\n            <Video<\/span> publicId<\/span>=\"video-blog\/cat\"<\/span> controls<\/span> muted<\/span> width<\/span>=\"500px\"<\/span>\/><\/span>\n          <\/CloudinaryContext<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We use the Video<\/code> component to render the video player with a width of 500px. We also specified the video\u2019s public ID, which is stored on Cloudinary. Lastly, we included props that give the video player controls and make it muted on render.<\/p>\n
The video player currently looks like this:<\/p>\n
\"\"<\/p>\n
The cloudinary-react video player is a wrapper on the traditional HTML5 video element with enhanced properties. It provides an innerRef<\/code> prop that grants us access to the underlying video element\u2019s methods and properties.<\/p>\n
With this, we will use React\u2019s useRef()<\/code> hook to reference the video element.<\/p>\n
Video events handling<\/h2>\n
With the Video<\/code> component\u2019s ref, we\u2019ll be able to utilize the onpause<\/code> and onended<\/code> events along with all other video events and properties. We create a ref and assign it to the innerRef<\/code> prop of the Video<\/code> with:<\/p>\n
    import<\/span> { Video, CloudinaryContext, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\n    import<\/span> { useRef } from<\/span> \"react\"<\/span>;\n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      const<\/span> videoRef = useRef();\n      return<\/span> (\n        <div<\/span>><\/span>\n          Hello World.{\" \"}\n          <CloudinaryContext<\/span> cloudName<\/span>=\"chuloo\"<\/span>><\/span>\n            <Video<\/span> publicId<\/span>=\"video-blog\/cat\"<\/span> controls<\/span> muted<\/span> width<\/span>=\"500px\"<\/span> \n                   innerRef<\/span>={videoRef}\/<\/span>><\/span>\n          <\/CloudinaryContext<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With the ref in place, we will handle actions when video events are triggered. We assign two functions, which we call when the video is paused, and the video ends. We do this in a useEffect<\/code> hook with:<\/p>\n
    import<\/span> { useRef, useEffect, useState } from<\/span> \"react\"<\/span>;\n    export<\/span> default<\/span> function<\/span> IndexPage<\/span>(<\/span>) <\/span>{\n      const<\/span> [videoEnded, setVideoEnded] = useState(undefined<\/span>)\n        const<\/span> videoRef = useRef()\n        useEffect(()<\/span> =><\/span> {\n            const<\/span> video = videoRef.current;\n            video.onpause = ()<\/span> =><\/span> {\n                \/\/ logic goes in here<\/span>\n            }\n            video.onended = ()<\/span> =><\/span> {\n                setVideoEnded(true<\/span>)\n                \/\/ logic goes in here<\/span>\n            }\n        }, [])\n      return<\/span> (\n        \/\/ render component here<\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the imported useEffect<\/code> hook, we created a function that triggers when the video is paused or ended.<\/p>\n
When the video ends, we store a true<\/code> boolean value in the component\u2019s state. With this state value, we can handle multiple UI updates. These interactions include:<\/p>\n
CloudinaryContext<\/code> receives props of any data we would like to make available to the Cloudinary child components. In this case, we passed our Cloudinary cloud name. You can obtain yours by creating an account on Cloudinary<\/a>.<\/p>\n