How to create a React.js video player with buffering | playback speed | scrubbing
VloĹžit
- Äas pĹidĂĄn 29. 07. 2024
- In this video, we're going to learn how to create a React.js video player with buffering, playback speed, and scrubbing.
React.js is a popular library for creating user interfaces in React.js. In this video, we're going to use React.js to create a video player. We'll cover topics like how to create a buffer, how to control playback speed, and how to scrub through the video.
This video is a great introduction to React.js and will help you understand the basics of how to create a video player using React.js. Thanks for watching!
Blog post describing a complete guide to implementing buffering: awacreates.com/blog/implement...
_______________________________________
đ PLEASE SUBSCRIBE FOR MORE VIDEOS đđđ
bit.ly/3cIb4er
_______________________________________________________________
SOURCE CODE đđđ
github.com/dieudonneAwa/video...
____________________________________________
đŽOTHER VIDEOS YOU MIGHT LIKEđđ
âśď¸ How to Create a Sidebar in Next.js & Tailwind CSS:
⢠How to Create a Sideba...
âśď¸ Complete Google OAuth with Next.js, Node, Express and Postgres | part 1:
⢠Complete Google OAuth ...
âśď¸ How to create React App from Scratch:
⢠How to setup React app...
âśď¸Create Sequelize Migration and Association:
⢠Create Sequelize Migra...
âśď¸How to create an animated modal in reactjs:
⢠How to create a nicely...
âśď¸ How to render a list of todo objects in Reactjs:
⢠Render a list of task ...
âśď¸How to setup sequelize and Postgres:
⢠How to setup Sequelize...
âśď¸Password Reset using SendGrid:
⢠Password Reset using S...
âśď¸ CRUD Operations with sequelize:
⢠CRUD operations with S...
____________________________________________
Follow me on Social Media:
Facebook: profile.php?...
Twitter: awadieudone?s=09
GitHub: github.com/dieudonneAwa
Personal Blog: awadieudonne.vercel.app/
Implementing buffering in React, Buffering techniques in React, React buffer management, Optimizing buffer in React, React buffer implementation, React buffer tutorial, React buffer best practices, React buffer state management, React buffer performance, Handling buffer in React, Complete guide to buffer implementation in React, React buffer for video streaming, React buffer for audio streaming, React buffer for real-time data, React buffer for live applications, Managing buffer in React for high-performance apps, Buffering in React for seamless user experience, React buffer for media playback, How to implement buffer in React. - VÄda a technologie
You are the first one who uses onwaiting event â¤ď¸â¤ď¸ i did not find much about this event on internet,
Wow I'm glad to hear. Thanks for watching man. Please subscribe if you haven't done that already
@@fullstackmastery bro can you make video on how to create read stream of a file from node js and display using react js ?? I am trying that but all in vein .. it would be a good content ..
@@fullstackmastery another question . Suppose i have setloading state inside onwaiting event and it return true if video is on waiting... Then how to remove state to back to false again if we are not waiting anything ....
â@@usmanshahid8529 Thanks for watching. And sorry for the late reply.
Yeah, you need to set the state for the isLoading to false in the onPlaying event handler.
@@usmanshahid8529 Alright. What is the use case for the read stream?
it so interesting đ
Nice bro đ
is there a way to do offline playing without separate downloading the video? Something like you cant download the video as file but you can make it offline viewable. Very complex, something like netflix. Is it possible?
Thank you so much!
You're welcome Bayron đ
great content bro, keep it up!!!!
Thanks bro. I will be uploading more content in the coming weeks.
Cool channel! And great content! Iâm your fan â¤
Thanks Martin
Please subscribe if you haven't done that already
nice work
Thanks đ
Is it necessary to remove every event listener like you do in useeffect?? You have put ref as a dependancy there ,then how this useeffect trigger in every event because ref did not cause useeffect to render again and again ,its bit confusing..can you answer me â¤ď¸â¤ď¸
I am clearing/removing them from the DOM so that each time the component is rendered, a new, fresh event listener is added so that the DOM doesn't listen to events multiple times, which can lead to memory leaks and as a result, cause bugs in the application.
@@fullstackmastery right but how ref as dependency create useeffect to render ? Because refs dont trigger re render
Also check what i am going to create
czcams.com/video/dezXwJN5EG8/video.html
I have added much more functionalities in this project.. How was it ? Its a full stack project đ how i should improve this one ? Any suggestions?
u r covering such huge topics and u r so unpopular
Thanks @Hamsitha CS.
I'm glad my content is helpful. Please subscribe if you haven't done that yet.