React Drive-In

A wicked awesome replacement for BigVideo.js that is lighter with fewer dependencies. It does not use jQuery, video.js, or any other large libraries. Only 4k minified and gzipped. This React component is a wrapper over the core Drive-In lib.

Created by Ronik Design.

Install

So easy. React is the only dependency: React.

• Using NPM

  $ npm install --save react-drive-in

• Download the latest release

Usage

• The easiest example

  var DriveIn = require('react-drive-in');
  
  React.render(
    <DriveIn 
      show="http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.mp4"
      poster="http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.jpg"
    />,
    $mountNode
  );

• More complex

  var DriveIn = require('react-drive-in');

  var playlist = [
    [
      'https://github.com/ronik-design/react-drive-in/blob/master/example/pelo.mp4?raw=true',
      'https://github.com/ronik-design/react-drive-in/blob/master/example/pelo.ogv?raw=true',
      'https://github.com/ronik-design/react-drive-in/blob/master/example/pelo.jpg?raw=true'
    ],
    [
      'https://github.com/ronik-design/react-drive-in/blob/master/example/kaledo.mp4?raw=true',
      'https://github.com/ronik-design/react-drive-in/blob/master/example/kaledo.ogv?raw=true',
      'https://github.com/ronik-design/react-drive-in/blob/master/example/kaledo.jpg?raw=true'
    ],
    [
      'http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.mp4',
      'http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.ogv',
      'http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.jpg'
    ]
  ];
  
  var onPlaying = function(itemNum) {};
  var onPause = function() {};
      
  React.render(
    <DriveIn 
      showPlaylist={playlist}
      onPlaying={onPlaying}
      onPause={onPause}
      loop={true}
      slideshow={false}
      mure={true}
    />,
    $mountNode
  );

What to show

The show and showPlaylist properties have many options. See example/index.html for an fairly complex set up.

• show is for SINGLE ITEMS. You can provide either a string, or a fallback array (e.g., [ 'video.mp4', 'video.ogv', 'video.jpg' ]).
• showPlaylist is for MULTIPLE ITEMS. You can provide either an array or strings (e.g., [ 'video1.mp4', 'video2.mp4' ]) or an array of fallback arrays (e.g., [ [ 'video1.mp4', 'video1.ogv' ], [ 'video2.mp4', 'video2.ogv' ])

Details

The HTML structure of this element looks like:

  <div id="drive-in-wrap">
    <div class="drive-in-media">
      <video> OR <img>
    </div>
  </div>

The included CSS sets up some required styles for it to function correctly.

The component falls back to using an image on touch devices, since many will not play video inline. Thus, you might want to specify fallback images either through the poster property or in the fallback arrays.

Formats

The component currently understands and supports, mp4, ogv, webm, jpg, gif, png.

Component API

<Video> component:

Developing

You can clone this repo and then:

npm install && gulp

This will install all dev dependencies and launch browser sync in Chrome.

License

See the License file.

Credit

• The repo contains a clip from this video by YouTube user lundbekegholm released under a Creative Commons license.
• BigVideo.js was the inspiration.
• react-video provided a great project scaffold for a React component.