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

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Duplicate DeSandro&#8217;s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page.

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

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!