react-video

    1.5.3 • Public • Published

    React Video

    Git release Travis license

    A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an <iframe> is rendered from browser, it blocks its parse because it isn't a non-blocking script. This isn't so good to your user, no?. With this react component, the <iframe> just will be loaded when the user click on play.

    Install

    Installing this component is very easy and it has just one dependency: React. So, you have a lot of options to do that:

    • Using NPM ~the quickest way~
      $ npm install --save react-video
    • Using Bower
      $ bower install --save react-video

    NOTICE: You need just one thing to make the component work. Put the base component style at the <header> tag. If you don't wanna use the .css extension, you can get the .styl or .scss extension at the folder ./lib.

    Then you're done! 😸

    Usage

    Using the component is simpler than installing. See an example with browserify to bundle your script:

      var Video = require('react-video');
     
      // Video from Youtube
      React.render(
        <Video from='youtube' videoId={videoId} />,
        $mountNode
      );
     
      // Video from Vimeo
      React.render(
        <Video from='vimeo' videoId={videoId} />,
        $mountNode
      );

    The property videoId is optional, so you can use it or not. If you don't pass the property, the component will select your type of video based on your id.

      React.render(
        <Video videoId={videoId} />
        document.querySelector('#your-div')
      );

    To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop onError in the component:

      var _onError = function(err) {
        console.log(err);
      };
     
      React.render(
        <Video onError={_onError} videoId={videoId} />
        document.querySelector('#your-div')
      );

    If you decide to use just Javascript without any module loader, you can get the global variable window.ReactVideo (or just ReactVideo):

      /** @jsx React.DOM */
     
      var Video = ReactVideo;

    Behind the Scene

    There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.

    So, the semantic HTML structure will be something like this:

      <div class='video'>
        <div class='video-loading'>
          <svg>...</svg>
        </div>
        <div class='video-image'>
          <button type='button' class='video-play-button'>
            <svg>...</svg>
          </button>
        </div>
        <div class='video-embed'>
          <iframe>...</iframe>
        </div>
      </div>

    This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a real functional example that you can follow.

    For more details, check out the API below.

    Component API

    <Video> component:

    Property Type Default Required Description
    from String none no Video source: youtube or vimeo. Leave empty and the service will be detected for you by looking a the id.
    videoId String none no The video ID
    onError Function yes no Callback function if the video can't be loaded

    Contributing

    Anyone can help make this project better - check out the Contributing guide!

    License

    See the License file.

    Install

    npm i react-video

    DownloadsWeekly Downloads

    105

    Version

    1.5.3

    License

    MIT

    Last publish

    Collaborators

    • pedronauck