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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    Create Digg URLs Using PHP

    Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love visiting Digg every once in a...

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!