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

Apr 3, 2025 - 15:04

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.

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 :