Stream Video In React & Next.js OPTIMALLY (WebM, CDN, m3u8 / HLS / ABS, ImageKit)

Author: ByteGrad
Published At: 2025-01-30T00:00:00
Length: 12:05

Summary

Description

πŸ‘‰ ImageKit’s free plan (sponsored): https://bit.ly/4aB2MVb

πŸ‘‰ Also view how to UPLOAD videos in React / Next.js: https://youtu.be/cCdFepe_q5E

πŸ‘‰ NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

πŸ‘‰ Check out Kinde for auth and more https://bit.ly/3QOe1Bh

πŸ‘‰ Work with me: [email protected]

πŸ‘‰ NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs

πŸ‘‰ Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript

πŸ‘‰ Professional CSS Course: https://bytegrad.com/courses/professional-css

πŸ‘‰ Web development roadmap 2024 & 2025: https://email.bytegrad.com

πŸ‘‰ Email newsletter (BIG update soon): https://email.bytegrad.com

πŸ‘‰ Discord: all my courses have a private Discord

⏱️ Timestamps:

00:00 Demo

00:57 Native video in HTML

01:42 WebM + CDN

01:57 Width & Height (IMPORTANT!)

03:25 autoPlay & muted

03:40 loop

03:44 Custom thumbnail (poster)

04:13 playsInline (mobile)

04:28 Adaptive Bitrate Streaming (HLS, m3u8 file, ABS)

05:25 Video.js for HLS

08:53 ImageKit Video component

10:21 Video transformations

10:55 Signed URLs

11:20 Format & codecs

#webdevelopment #reactjs #nextjs

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 and KRS-number: 0001125554 .

.

TOP resource to LEARN AI for Developers - https://datacamp.pxf.io/RGyxrR (paid sponsorship & ByteGrad Sp. z o.o. gets commission)

Translated At: 2025-08-01T01:17:41Z

Request translate (One translation is about 5 minutes)

Version 3 (stable)

Optimized for a single speaker. Suitable for knowledge sharing or teaching videos.

Recommended Videos