Best React Video Component Examples

1.React-based H5 video player

Qier-player is a web video player component for React, It has a simple interface and smooth operation which supports the most functions of other video players. In addition, Qier-player can switch between video resolutions (4K, 2K, 1080P, 720P and 480P) if desired.

Feature
Video should be on focused, then:

• Top arrow keys: volume increase
• Bottom arrow keys: volume reduction
• Left arrow keys: Rewind 3 seconds
• Right arrow keys: fast forward 3 seconds
• Space keys: pause/play

View on Github

2.@u-wave/react-youtube

YouTube player component for React. https://u-wave.net/react-youtube

View on Github

3.React Twitch Embed Video

Your solution to embeding the Twitch video player in your ReactJS application
https://talk2megooseman.github.io/react-twitch-embed-video/

View on Github

4.React Video Markers

React Video player with markers

5.React Awesome Player

video.js player component for React.

Secondary development based on video.js, perfectly compatible with React , support subtitle display and the live stream of HLS. It is an awesome plugin for playing video on webpage. If anything goes wrong during using, please submit issues in this repository, or send email to author: returnzp@gmail.com

Example
Demo Page

View on Github

6.A React-based Web video player

A React-based web video player.

• Streaming: Griffith makes streaming easy. Whether your video format is mp4 or hls, Griffith can use Media Source Extension (MSE) for segment loading.

• Extensibility: Griffith makes it simple to support video features in React apps. It also supports the UMD (Universal Module Definition) patterns for use directly in the browser if your application is not based on React.

• Reliability: Griffith has been widely used in the web and mobile web of zhihu.

A React-based web video player https://codesandbox.io/embed/p03wm0o80

7.Simple youtube clone written in react

simple react app using the youtube api.

This is a simple video app that uses the youtube api to fetch videos.

You can type a video in the search bar and search for videos.

8.React Video Cover

A small React component rendering a video with object-fit: cover, or a Fallback if object-fit is not available.

Demo
http://tkloht.github.io/react-video-cover

GitHub: https://github.com/tkloht/react-video-cover

9.React happy video

Welcome to react-happy-player, a low-config react component for a stylish video player. Intended to provide easy control on the video playback. See a demo.

GitHub: https://github.com/JulienDemarque/react-happy-video

10.Youtube App in React.js

Youtube App in React.js!
This app is built using React.js bu consumingthe official Youtuibe API

11.React html5video

A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y.

V2 API has changed and is not backwards compatible. You can find the old documentation here.

View the demo.

GitHub: https://github.com/mderrick/react-html5video

12.Video React

Video.React is a web video player built from the ground up for an HTML5 world using React library.

A web video player built for the HTML5 world using React library. https://video-react.js.org/

13.React dailymotion

Dailymotion player component for React.

Live Demo
http://u-wave.net/react-dailymotion/

View on GitHub

14.React Video

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image.

If you don’t know, when an iframe is rendered from browser, it blocks its parse because it isn’t a non-blocking script. This isn’t so good to your user, no?. With this react component, the iframe just will be loaded when the user click on play.

Live Demo
http://pedronauck.github.io/react-video/

React component to load video from Vimeo or Youtube across any device. http://pedronauck.github.io/react-video

View on GitHub

15.React soundplayer

Create highly-customizable SoundCloud players with React.
Live Demo
http://labs.voronianski.com/react-soundplayer/

View on GitHub

16.React youtube

Simple React component acting as a thin layer over the YouTube IFrame Player API

Features

• url playback
• playback event bindings
• customizable player options

Live Demo http://troybetz.github.io/react-youtube/

View on GitHub

17.React Player

React Player .A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion. Used by rplayr, an app to generate playlists from Reddit URLs.

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.

Polyfills
If you are using npm and need to support browsers without Promise you will need a Promise polyfill. To support Streamable or Vidme videos you will also need a fetch polyfill for browsers without fetch

#reactjs #javascript