How to create a React.js video player with buffering | playback speed | scrubbing

Поделиться
HTML-код
  • Опубликовано: 14 июн 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.
  • НаукаНаука

Комментарии • 29

  • @usmanshahid8529
    @usmanshahid8529 Год назад +3

    You are the first one who uses onwaiting event ❤️❤️ i did not find much about this event on internet,

    • @fullstackmastery
      @fullstackmastery  Год назад +1

      Wow I'm glad to hear. Thanks for watching man. Please subscribe if you haven't done that already

    • @usmanshahid8529
      @usmanshahid8529 Год назад +1

      @@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 ..

    • @usmanshahid8529
      @usmanshahid8529 Год назад +1

      @@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 ....

    • @fullstackmastery
      @fullstackmastery  Год назад +1

      ​@@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.

    • @fullstackmastery
      @fullstackmastery  Год назад +2

      @@usmanshahid8529 Alright. What is the use case for the read stream?

  • @KhanhNguyen-zx3wv
    @KhanhNguyen-zx3wv Год назад +1

    it so interesting 👍

  • @maratiot
    @maratiot Год назад +1

    Cool channel! And great content! I’m your fan ❤

  • @bayronpicado2165
    @bayronpicado2165 Год назад +1

    Thank you so much!

  • @vetrisuriya4702
    @vetrisuriya4702 Год назад +1

    Nice bro 👍

  • @pablotexeira7579
    @pablotexeira7579 Год назад +1

    great content bro, keep it up!!!!

    • @fullstackmastery
      @fullstackmastery  Год назад

      Thanks bro. I will be uploading more content in the coming weeks.

  • @LevelUp3646
    @LevelUp3646 Год назад +1

    nice work

  • @mark.raetzel
    @mark.raetzel 9 месяцев назад +1

    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?

  • @usmanshahid8529
    @usmanshahid8529 Год назад +1

    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 ❤️❤️

    • @fullstackmastery
      @fullstackmastery  Год назад +2

      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.

    • @usmanshahid8529
      @usmanshahid8529 Год назад +2

      @@fullstackmastery right but how ref as dependency create useeffect to render ? Because refs dont trigger re render

    • @usmanshahid8529
      @usmanshahid8529 Год назад +1

      Also check what i am going to create
      ruclips.net/video/dezXwJN5EG8/видео.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?

  • @hamsithacs4091
    @hamsithacs4091 Год назад +2

    u r covering such huge topics and u r so unpopular

    • @fullstackmastery
      @fullstackmastery  Год назад

      Thanks @Hamsitha CS.
      I'm glad my content is helpful. Please subscribe if you haven't done that yet.