Optimize videos in Next.js (video tutorial)

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

Tutorial contents

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

Introduction

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

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

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

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

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

 

 

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.