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
    Dynamically Load Stylesheets Using MooTools 1.2

    Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different.

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

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.

  2. yzj

    How to turn off relevant video functions when pausing

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