Introduction to React: Understanding the Basics-part.11

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.

<audio controls>
  <source src="/audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="/video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

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 <ReactPlayer url="https://www.example.com/video.mp4" controls />;
};

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:

<iframe 
  width="560" 
  height="315" 
  src="https:the embed link you find goes here" 
  title="YouTube video player" 
  frameBorder="0" 
  allowFullScreen
></iframe>