three ways to use audio and video inside React:

Using audio and video Tags (Basic HTML Elements):

Some browsers may have compatibility issues with certain formats.

Your browser does not support the audio element.



  
  Your browser does not support the video tag.

Using NPM Packages (Like react-player):
More customization,
Supports many formats,
Handles fallbacks if a format is not supported.

First, install react-player:

npm install react-player

Then, use it in your component:

import ReactPlayer from "react-player";

const MyVideo = () => {
  return ;
};

export default MyVideo;

When using react-player, reducing bundle size is important. Instead of importing the entire package, you can tree-shake it by only importing what you need.This prevents unnecessary code from being bundled, making your app faster and lighter.for example:

import ReactPlayer from "react-player/youtube";

You can customize playback behavior using props like:

playing: false → Prevent autoplay

volume: 0.5 → Set default volume to 50%

controls: true → Show video controls

loop: true → Repeat video

Using Third-Party Video Players (YouTube, Vimeo, etc.):

!! Limited customization (depends on the platform).

Example using an iframe: