react-player vs react-iframe vs @vidstack/react
React Video and Iframe Libraries Comparison
1 Year
react-playerreact-iframe@vidstack/reactSimilar Packages:
What's React Video and Iframe Libraries?

These libraries provide various functionalities for embedding and controlling video content in React applications. They cater to different use cases, from simple iframe embedding to complex video player functionalities, allowing developers to choose based on their specific requirements for performance, customization, and ease of use.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-player1,265,8779,85440.2 kB138 days agoMIT
react-iframe89,993439331 kB25-ISC
@vidstack/react67,1202,998125 kB137a year agoMIT
Feature Comparison: react-player vs react-iframe vs @vidstack/react

Customization

  • react-player:

    react-player allows for some level of customization, such as controlling playback speed, volume, and custom styling of the player. However, it is more limited compared to @vidstack/react in terms of deep customization.

  • react-iframe:

    react-iframe provides minimal customization options, mainly focused on the iframe attributes like width, height, and sandboxing. It is not designed for deep customization of the embedded content itself, as it simply loads external URLs.

  • @vidstack/react:

    @vidstack/react offers extensive customization options, allowing developers to create tailored video experiences. It supports custom controls, themes, and events, enabling fine-grained control over the player’s behavior and appearance.

Ease of Use

  • react-player:

    react-player is user-friendly and straightforward, making it easy to integrate into projects. Its API is simple, allowing developers to get started quickly with basic video playback.

  • react-iframe:

    react-iframe is extremely easy to use, requiring minimal setup. It is perfect for developers looking for a quick solution to embed content without any complex configurations.

  • @vidstack/react:

    @vidstack/react has a steeper learning curve due to its extensive features and API. However, once familiar, developers can leverage its capabilities to create sophisticated video applications.

Performance

  • react-player:

    react-player is generally performant for most use cases, but it may have limitations when handling large video files or high traffic, as it relies on third-party services for playback.

  • react-iframe:

    react-iframe performance largely depends on the external content being loaded. It does not provide optimizations for video playback, which may lead to slower performance if the embedded content is heavy or poorly optimized.

  • @vidstack/react:

    @vidstack/react is optimized for performance, supporting lazy loading and adaptive streaming, which ensures smooth playback even on slower connections. It is designed to handle high-quality video efficiently, making it suitable for demanding applications.

Supported Media Sources

  • react-player:

    react-player supports multiple media sources, including YouTube, Vimeo, and custom URLs, making it a flexible choice for projects that need to integrate various video platforms.

  • react-iframe:

    react-iframe can embed any external content that can be displayed in an iframe, including videos from various sources, but it does not provide specific support for video formats or controls.

  • @vidstack/react:

    @vidstack/react supports a wide range of media sources, including HLS, DASH, and MP4, making it versatile for various video formats and streaming protocols.

Community and Support

  • react-player:

    react-player has a large community and extensive documentation, making it easy for developers to find help and resources. Its popularity means that many common issues have been addressed by the community.

  • react-iframe:

    react-iframe has a smaller community, but it is straightforward enough that developers can easily find solutions to common issues. Documentation is available but may not cover advanced use cases extensively.

  • @vidstack/react:

    @vidstack/react has a growing community and active support, with documentation and examples available to help developers navigate its features. However, it may not be as widely adopted as other libraries yet.

How to Choose: react-player vs react-iframe vs @vidstack/react
  • react-player:

    Choose react-player if you need a versatile and easy-to-use video player that supports multiple media sources, including YouTube, Vimeo, and custom URLs. It is great for projects that require quick integration with various video services and straightforward playback controls.

  • react-iframe:

    Choose react-iframe if your primary need is to embed external content within an iframe. It is lightweight and straightforward, making it suitable for simple use cases where you want to display content from other websites without complex interactions.

  • @vidstack/react:

    Choose @vidstack/react if you need a highly customizable and performant video player that supports modern web standards and provides a rich API for building custom video experiences. It is ideal for applications that require advanced features like adaptive streaming and accessibility.

README for react-player

ReactPlayer

Latest npm version Test Coverage Become a sponsor on Patreon

A React component for playing a variety of URLs, including file paths, HLS, DASH, YouTube, Vimeo, Wistia and Mux.


Version 3 of ReactPlayer is a major update with a new architecture and many new features. It is not backwards compatible with v2, so please see the migration guide for details.

Using Next.js and need to handle video upload/processing? Check out next-video.

✨ The future of ReactPlayer

Maintenance of ReactPlayer is being taken over by Mux. Mux is a video api for developers. The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers.

ReactPlayer will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support.

Usage

npm install react-player # or yarn add react-player
import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer src='https://www.youtube.com/watch?v=LXb3EKWsInQ' />

If your build system supports import() statements and code splitting enable this to lazy load the appropriate player for the src you pass in. This adds several reactPlayer chunks to your output, but reduces your main bundle size.

Demo page: https://cookpete.github.io/react-player

The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

For platforms without direct use of npm modules, a minified version of ReactPlayer is located in dist after installing. To generate this file yourself, checkout the repo and run npm run build:dist.

Autoplay

As of Chrome 66, videos must be muted in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves. Please set muted={true}.

Props

Prop | Description | Default ---- | ----------- | ------- src | The url of a video or song to play | undefined playing | Set to true or false to play or pause the media | undefined preload | Applies the preload attribute where supported | undefined playsInline | Applies the playsInline attribute where supported | false crossOrigin | Applies the crossOrigin attribute where supported | undefined loop | Set to true or false to loop the media | false controls | Set to true or false to display native player controls.
  ◦  For Vimeo videos, hiding controls must be enabled by the video owner. | false volume | Set the volume of the player, between 0 and 1
  ◦  null uses default volume on all players #357 | null muted | Mutes the player | false playbackRate | Set the playback rate of the player
  ◦  Only supported by YouTube, Wistia, and file paths | 1 pip | Set to true or false to enable or disable picture-in-picture mode
  ◦  Only available when playing file URLs in certain browsers | false width | Set the width of the player | 320px height | Set the height of the player | 180px style | Add inline styles to the root element | {} light | Set to true to show just the video thumbnail, which loads the full player on click
  ◦  Pass in an image URL to override the preview image | false fallback | Element or component to use as a fallback if you are using lazy loading | null wrapper | Element or component to use as the container element | null playIcon | Element or component to use as the play icon in light mode previewTabIndex | Set the tab index to be used on light mode | 0

Callback props

Callback props take a function that gets fired on various player events:

Prop | Description ---- | ----------- onClickPreview | Called when user clicks the light mode preview onReady | Called when media is loaded and ready to play. If playing is set to true, media will play immediately onStart | Called when media starts playing onPlay | Called when the playing prop is set to true onPlaying | Called when media actually starts playing onProgress | Called when media data is loaded onTimeUpdate | Called when the media's current time changes onDurationChange | Callback containing duration of the media, in seconds onPause | Called when media is paused onWaiting | Called when media is buffering and waiting for more data onSeeking | Called when media is seeking onSeeked | Called when media has finished seeking onRateChange | Called when playback rate of the player changed
  ◦  Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths onEnded | Called when media finishes playing
  ◦  Does not fire when loop is set to true onError | Called when an error occurs whilst attempting to play media onEnterPictureInPicture | Called when entering picture-in-picture mode onLeavePictureInPicture | Called when leaving picture-in-picture mode

Config prop

There is a single config prop to override settings for each type of player:

<ReactPlayer
  src={src}
  config={{
    youtube: {
      color: 'white',
    },
  }}
/>

Settings for each player live under different keys:

Key | Options --- | ------- youtube | https://developers.google.com/youtube/player_parameters#Parameters vimeo | https://developer.vimeo.com/player/sdk/embed hls | https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning

Methods

Static Methods

Method | Description ------ | ----------- ReactPlayer.canPlay(src) | Determine if a URL can be played. This does not detect media that is unplayable due to privacy settings, streaming permissions, etc. In that case, the onError prop will be invoked after attempting to play. Any URL that does not match any patterns will fall back to a native HTML5 media player. ReactPlayer.addCustomPlayer(CustomPlayer) | Add a custom player. See Adding custom players ReactPlayer.removeCustomPlayers() | Remove any players that have been added using addCustomPlayer()

Instance Methods

Use ref to call instance methods on the player. See the demo app for an example of this. Since v3, the instance methods aim to be compatible with the HTMLMediaElement interface.

Advanced Usage

Custom player controls

By default ReactPlayer is a chromeless player. By setting the controls prop to true, you can enable the native controls for the player. However, the controls will look different for each player. The ones based on HTML5 media players will look like the native controls for that browser, while the ones based on third-party players will look like the native controls for that player.

<ReactPlayer src='https://www.youtube.com/watch?v=LXb3EKWsInQ' controls />

If you like to add your own custom controls in a convenient way, you can use Media Chrome. Media Chrome is a library that provides a set of UI components that can be used to quickly build custom media controls.

Simple example (Codesandbox)
import ReactPlayer from "react-player";
import {
  MediaController,
  MediaControlBar,
  MediaTimeRange,
  MediaTimeDisplay,
  MediaVolumeRange,
  MediaPlaybackRateButton,
  MediaPlayButton,
  MediaSeekBackwardButton,
  MediaSeekForwardButton,
  MediaMuteButton,
  MediaFullscreenButton,
} from "media-chrome/react";

export default function Player() {
  return (
    <MediaController
      style={{
        width: "100%",
        aspectRatio: "16/9",
      }}
    >
      <ReactPlayer
        slot="media"
        src="https://stream.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k"
        controls={false}
        style={{
          width: "100%",
          height: "100%",
          "--controls": "none",
        }}
      ></ReactPlayer>
      <MediaControlBar>
        <MediaPlayButton />
        <MediaSeekBackwardButton seekOffset={10} />
        <MediaSeekForwardButton seekOffset={10} />
        <MediaTimeRange />
        <MediaTimeDisplay showDuration />
        <MediaMuteButton />
        <MediaVolumeRange />
        <MediaPlaybackRateButton />
        <MediaFullscreenButton />
      </MediaControlBar>
    </MediaController>
  );
}

Light player

The light prop will render a video thumbnail with simple play icon, and only load the full player once a user has interacted with the image. Noembed is used to fetch thumbnails for a video URL. Note that automatic thumbnail fetching for Facebook, Wistia, Mixcloud and file URLs are not supported, and ongoing support for other URLs is not guaranteed.

If you want to pass in your own thumbnail to use, set light to the image URL rather than true.

You can also pass a component through the light prop:

<ReactPlayer light={<img src='https://example.com/thumbnail.png' alt='Thumbnail' />} />

The styles for the preview image and play icon can be overridden by targeting the CSS classes react-player__preview, react-player__shadow and react-player__play-icon.

Responsive player

Set width to 100%, height to auto and add an aspectRatio like 16 / 9 to get a responsive player:

<ReactPlayer
  src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
  style={{ width: '100%', height: 'auto', aspectRatio: '16/9' }}
/>

SDK Overrides

You can use your own version of any player SDK by using NPM resolutions. For example, to use a specific version of hls.js, add the following to your package.json:

{
  "resolutions": {
    "hls.js": "1.6.2"
  }
}

Adding custom players

If you have your own player that is compatible with ReactPlayer’s internal architecture, you can add it using addCustomPlayer:

import YourOwnPlayer from './somewhere';
ReactPlayer.addCustomPlayer(YourOwnPlayer);

Use removeCustomPlayers to clear all custom players:

ReactPlayer.removeCustomPlayers();

It is your responsibility to ensure that custom players keep up with any internal changes to ReactPlayer in later versions.

Mobile considerations

Due to various restrictions, ReactPlayer is not guaranteed to function properly on mobile devices. The YouTube player documentation, for example, explains that certain mobile browsers require user interaction before playing:

The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it’s initiated by a user interaction (such as tapping on the player).

Multiple Sources and Tracks

Since v3 if the player supports multiple sources and / or tracks, it works the same as the native <source and <track> elements in the HTML <video> or <audio> element.

<ReactPlayer controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg">
  <track kind="subtitles" src="subs/subtitles.en.vtt" srclang="en" default>
  <track kind="subtitles" src="subs/subtitles.ja.vtt" srclang="ja">
  <track kind="subtitles" src="subs/subtitles.de.vtt" srclang="de">
</ReactPlayer>

Migrating to v3

ReactPlayer v3 is a major update with a new architecture and many new features. It is not backwards compatible with v2, so please see the migration guide for details.

Some providers have not been updated for v3, it is recommended to keep using v2 and vote to add this provider to v3 in discussions

Migrating to v2

ReactPlayer v2 changes single player imports and adds lazy loading players. Support for preload has also been removed, plus some other changes. See MIGRATING.md for information.

Supported media

Contributing

See the contribution guidelines before creating a pull request.

Thanks


Jackson Doherty

Joseph Fung