More than 80% of people view videos on the Internet regularly, and that people enjoy watching videos with attractive, intelligent, and timely material that isn’t news to anyone.
When watching ads for their favorite product, customers devote their time and thought. Based on the information offered in the videos, they can make informed selections regarding the products.
Anyone can gain a competitive advantage over their current market competitors by using in-video advertising. Videos are currently the most efficient means in the advertising space of enhancing a company’s sales.
This post will teach us how to create in-video ads in Next.js using Cloudinary as our video hosting service.
We completed this project in a CodeSandbox. Fork and run it to get started quickly.
https://github.com/Olanetsoft/Create-in-video-ads-in-Next.js
Next.js is an open-source, React-based frontend development web framework that allows server-side rendering and the generation of static websites and applications.
To create a new project, we use the npx create-next-app command to scaffold a new project in a directory of our choice.
Once the app is created, and the dependencies are automatically installed, we will see a message with instructions for navigating to our site and running it locally.
We do this with the following command:
cd <project name> && npm start
Code language: HTML, XML (xml)Next.js will initiate a hot-reloading development environment accessible by default at http://localhost:3000.
To get started, we’ll create a folder called components. We’ll also create a file named video.js in the root directory and update it with the following code snippet.
import { useRef } from "react";
export default function Video() {
return (
<div className="wrapper">
<div className="video-wrapper">
</div>
</div>
);
}
Code language: JavaScript (javascript)Next, we will import the video component we just created in pages/index.js with the following code snippet.
import Head from "next/head";
import styles from "../styles/Home.module.css";
import Video from "../components/video";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create in-video ads in Next.js</title>
<meta name="description" content="Create in-video ads in Next.js" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>Create in-video ads in Next.js</h1>
<Video />
</main>
</div>
);
}
Code language: JavaScript (javascript)Our application should now look similar to what is shown below.
This section will demonstrate how to implement the in-video ads with the following code snippet.
https://gist.github.com/Olanetsoft/64930afe3cace27f255fc84739eb9462
https://gist.github.com/Olanetsoft/64930afe3cace27f255fc84739eb9462
In the code snippet above, we:
- Declare a
useRefhookvideoRef,adVideoRef, andskipButtonRefthat allows us to store a reference to any HTML element - Create an
onVideoTimeUpdatefunction that will be called when the main video playback progress changes - Create a throttle function that will delay the calls. This way, the calls will be made after every 800 milliseconds or after whatever duration we want, thus avoiding the
onVideoTimeUpdatefunction being called too often - Create a
skipAdfunction that ensures that the ad video is paused/ended, hides the ad video element, hides the skip button, increments the main video’s current playback time by a second, and then unpauses the main video
Next, we will add some CSS styles to the application with the code snippet below.
https://gist.github.com/Olanetsoft/861db6c482ef5832473bbbf538707e40
https://gist.github.com/Olanetsoft/861db6c482ef5832473bbbf538707e40
After testing our application, we should get something similar to what you see below.
https://www.loom.com/share/be9e1d1f0527488bacb5f4b10c0f0fc7
This post demonstrated how to create in-video ads in Next.js.
We may also find these resources helpful.