Next.js – How to Play HTML Video with Custom Controls?

In this tutorial, we will show you how to play an HTML video on a Next.js application. Along with this, we will also discuss how to add various video controls like Play/Pause, Full-screen playback, and Speed control of video in the Next Js application.

Video playback is a very common feature in many web applications. Video playback features may be required by applications like e-commerce, gallery sites, enterprise demo videos etc.

In Nextjs application, we can easily play videos using the HTML video element. This element provides built-in support for playing video files and allows to customize of the appearance and behaviour of the video player using CSS and JavaScript.

In this tutorial, we’ll show you how to play an HTML video on a Next.js application and explore some common use cases and functionalities.

How to Create a Video Player in Nextjs Application?

Step 1: Install Next.js

First, make sure you have Next.js installed. You can do this by running the following command in your terminal:

npm install next react react-dom

Thereafter create a new Nextjs project by running the following command:

npx create-next-app@11 my-app

Enter into the application directory:

cd my-app

Step 2: Create a new Next.js page

Next, create a new page in your Next.js application. You can do this by creating a new file in the pages directory of your project. For example, you could create a file called video.js with the following content:

import React from 'react';

export default function Video() {
  return (
    <div>
      <h1>Video</h1>
      <video src="/my-video.mp4" controls></video>
    </div>
  );
}

In the above code, we are using the video element to play a video file located at /my-video.mp4. The controls attribute specifies that the default video controls should be displayed.

Step 3: Customize the video controls

You can customize the appearance and behaviour of the video controls by using CSS and JavaScript. For example, you could hide the default controls and create your own custom controls using buttons and event listeners.

Here is an example of how you could create custom play and pause buttons:

import React, { useRef } from 'react';

export default function Video() {
  const videoRef = useRef();

  const handlePlay = () => {
    videoRef.current.play();
  };

  const handlePause = () => {
    videoRef.current.pause();
  };

  return (
    <div>
      <h1>Video</h1>
      <video ref={videoRef} src="/my-video.mp4"></video>
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}

We are using the useRef hook to get a reference to the video element. We are then using this reference to call the play and pause methods, when the user clicks on the custom, play and pause buttons.

How do I control playback speed?

We can control the playback speed of an HTML video by using the playbackRate property of the video element. This property specifies the speed at which the video should be played, where 1.0 is the normal speed, 0.5 is half speed, and 2.0 is double speed.

This is how you could create custom buttons to control the playback speed of a video in a Next.js application:

import React, { useRef } from 'react';

export default function Video() {
  const videoRef = useRef();

  const handleSpeedChange = (speed) => {
    videoRef.current.playbackRate = speed;
  };

  return (
    <div>
      <h1>Video</h1>
      <video ref={videoRef} src="/my-video.mp4" controls></video>
      <button onClick={() => handleSpeedChange(0.5)}>0.5x</button>
      <button onClick={() => handleSpeedChange(1)}>1x</button>
      <button onClick={() => handleSpeedChange(1.5)}>1.5x</button>
      <button onClick={() => handleSpeedChange(2)}>2x</button>
    </div>
  );
}

Here we are using the useRef hook to get a reference to the video element. Then we are using this reference to set the playbackRate property when the user clicks on one of the custom speed control buttons.

How to dynamically load video content?

We can also dynamically load video content in a Next.js application using JavaScript APIs such as MediaSource or fetch.

For example, you could use the fetch API to download a video file from a server and then use the MediaSource API to create a Blob URL that can be used as the src of a video element:

import React, { useEffect, useRef } from 'react';

export default function Video() {
  const videoRef = useRef();

  useEffect(() => {
    const loadVideo = async () => {
      const response = await fetch('/my-video.mp4');
      const data = await response.blob();
      const url = URL.createObjectURL(data);
      videoRef.current.src = url;
    };

    loadVideo();
  }, []);

  return (
    <div>
      <h1>Video</h1>
      <video ref={videoRef} controls></video>
    </div>
  );
}

By using the useEffect hook to run a function when the component mounts. This function uses the fetch API to download a video file from the server and then creates a Blob URL using the URL.createObjectURL method. This URL is then set as the src of the video element.

import React, { useRef } from 'react';

export default function Video() {
  const videoRef = useRef();

  const handleFullscreen = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      videoRef.current.requestFullscreen();
    }
  };

  return (
    <div>
      <h1>Video</h1>
      <video ref={videoRef} src="/my-video.mp4" controls></video>
      <button onClick={handleFullscreen}>Toggle Fullscreen</button>
    </div>
  );
}

Conclusion

We discussed how to easily embed a Video statically or dynamically into HTML 5 Video tag and programmatically add various controls to the component itself. Various Video controls like Play/ Pause, Full Screen, Speed Control etc can be implanted into the component itself we can adjust the Video playback behaviour very efficiently.