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

From the creator

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 ⏳ 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

Choose to Build with AI
Matched to Build an App

AI Maker Residence 3

The third AI workshop taught by our legendary teacher, Nick Sarafa. This is a full-day hands-on training workshop for purposeful co-creation with AI using Claude Code. Imagine having access to hundreds of billions of dollars of computing power and knowing exactly how to make it work for you through the power of super intelligence.

◆ Fri 09 Oct 2026 ◆ KOKO Cafe, London ◆ With Nick Sarafa
AI Maker Residence 3
Live event
AI Maker Residence 3
Fri 09 Oct 2026

More like this

Running one yourself?

List your AI event,
wherever it is.

A meetup, a workshop, a hackathon, a conference. Any city, or online. Tell us about it and it lands in front of people already learning this stuff.