Norway


Streaming entertainment is a massive interest of mine as both a consumer and 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 providers?


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




Using the ReactPlayer component is really simple:


import ReactPlayer from '-player';

class App extends Component {
  render() {
    return (
      <div>
        <ReactPlayer
          url='https://www.youtube.com/watch?v=rnwlWn603g4'
          className='-player'
          playing
          width='0%'
          height='0%'
        />
      </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.


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.


  • CSS @supports  - css3logo250 - React Video Player

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn’t been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we…

  • Serving Fonts from CDN  - css3logo250 - React Video Player

    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…

  • 9 More Mind-Blowing WebGL Demos  - webgl water - React Video Player
  • CSS Columns  - css3logo250 - React Video Player

    One major gripe that we’ve always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there’s no shaking the feeling that there should be a…



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here