Programmable Media

Optimize videos in Next.js (video tutorial)

Last updated: Sep-12-2024

Overview

This video tutorial teaches you how to optimize the delivery of videos in a Next.js app by using the CldVideoPlayer component of the Next Cloudinary library, which embeds the Cloudinary Video Player.

Video tutorial


View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

Jump to this spot in the video  0:00 The CldVideoPlayer component of the Next Cloudinary library allows you to embed videos for optimized delivery, maximizing performance in Next.js.

Deliver a video using an HTML video tag for comparison

Jump to this spot in the video  0:16 Using an HTML video tag to embed a video on a webpage delivers the whole video in its original size and format.

Deliver the video using the Cloudinary CldVideoPlayer component

Jump to this spot in the video  0:46 Delivering the same video using the CldVideoPlayer component of the Next Cloudinary library, optimizes the format and quality for delivery, so a much smaller file is delivered.

Crop and resize the video

Jump to this spot in the video  2:11 In addition to optimizing the format and quality of your videos, you can resize them on the server side so that you deliver only the size you need. Specify an object in the transformation prop including the type of crop, its focus (gravity), plus the width and height.

See examples of using the CldVideoPlayer component in GitHub.


Keep learning

Related topics

If you like this, you might also like...

Embedding Videos in Next.js
Use the Cloudinary Video Player to embed videos using Next.js
Video Transformations
Build an e-commerce video showcasing products, in Node.js
Content-aware Video Cropping
Smartly crop a video using content-aware AI

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: