Get started with ImageKit for free: https://tinyurl.com/ab2rcuuf

Today you'll learn how to build a Next.js video player. We'll cover all of the core features that you would want: uploading videos, handling and generating thumbnails, having video watermarks or overlays. This will cover everything you need to have a solid base for a video display or video playing type application, so that you can go and extend it and have it work for your own application.

🎞 Video Resources 🎞
Code in this video: https://github.com/techwithtim/NextJSVideoPlayer
Adaptative Bitrate Streaming: https://imagekit.io/docs/adaptive-bitrate-streaming

🚀 Tools I Use
Get 10% off with code techwithtim
Openclaw setup: https://www.hostinger.com/techwithtim
VPS setup: https://www.hostinger.com/techwithtim10 (this link will be live in 4 hours)

⏳ Timestamps ⏳
00:00:00 | Project Demo 
00:01:51 | Project/Code Setup
00:03:52 | ImageKit Setup
00:06:15 | Scaffolding the App
00:11:06  | Uploading Videos
00:52:14 | Video Library
01:04:30 | Video Player/Watch Page
01:21:38 | Watermarking

Hashtags
#ImageKit #NextJS #SoftwareEngineer

UAE Media License Number: 3635141

TechWithTim, founded by Tim Ruscica, is a popular YouTube channel and blog offering tutorials, guides, and projects on programming, game development, and machine learning. With a friendly and approachable teaching style, Tim covers a wide range of topics, including Python programming, game development with Pygame, and machine learning algorithms with TensorFlow and Keras. Developers of all skill levels can benefit from TechWithTim's engaging content and hands-on coding projects, making it an in resource for learning and honing technical skills.

Tech With Tim

A step-by-step walkthrough for building a video player application in Next.js using ImageKit (a sponsored tool) for video storage, delivery, and optimization. Covers project scaffolding, TypeScript types, API routes for upload authentication and video metadata storage (using a local JSON file), a video upload form component with support for thumbnails and watermarks, and a video library page. Key ImageKit features highlighted include URL-based video transformations, automatic thumbnail generation, watermark overlays, and quality/format adjustments.

How to Build a Video Player in Next.js (Step-by-Step)