React Video Player

By  on  

Streaming entertainment is a massive interest of mine as both a consumer and web developer.  My love for streaming entertainment dates back to the early days of RealPlayer and the misery of a million codecs.  Fast forward to today and I'm working a lot with ReactJS, as well as the dozens of streaming technologies like YouTube, Twitch, Facebook, and so on.  That lead me to think:  is there a good open source component for embedding videos from popular video providers?

Let's check out ReactPlayer, a very simple but useful streaming video player component for ReactJS!

Using the ReactPlayer component is really simple:

import ReactPlayer from 'react-player';

class App extends Component {
  render() {
    return (
      <div>
        <ReactPlayer
          url='https://www.youtube.com/watch?v=rnwlWn603g4'
          className='react-player'
          playing
          width='100%'
          height='100%'
        />
      </div>
    );
  }
}

ReactPlayer provides a number of options for both general and service-specific playback, also providing a number of event callbacks and even multi-source playback options.

React Video Player

ReactPlayer is an awesome utility for embedding popular media sources in your own site.  The config is minimal and you can have any video service up and running in a few minutes.

Recent Features

Incredible Demos

  • By
    CSS Text Overlap

    One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing...

  • By
    jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

Discussion

  1. So besides the fact of having many “ready-made” solutions available these days, is there a reason to not just code the component up myself? I have a requirement to display a video on a welcome overlay before the user enters the site (5mb before any optimizations. I was doing a quick search for any ‘gotchas’ before implementing, but every article seems to just lean on some library. I have no issue with that, I’m just a fan of figuring it out myself for learning purposes.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!