Submit your widget

react-drive-in - React component supporting background videos and playlists.

Created 4 years ago   Views 4162   downloads 856    Author mshick
View DemoDownload
18
Share |

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.

Demo and some example functionality here: github.io

Created by Ronik Design.

So easy. React is the only dependency: React.

  • Using NPM
  $ npm install --save react-drive-in
  • 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
  );

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' ])

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.

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

<Video> component:

PropertyTypeDefaultRequiredDescription
showString,ArraynonenoThe video or video fallback array to show.
showPlaylistArraynonenoAn array of video URL strings, or of video fallback arrays.
posterStringnonenoA fallback image to use, when all else fails.
muteBooleantruenoShould the videos be played muted?
loopBooleantruenoShould videos / playlists loop or begin again when finished?
loopPlaylistItemsBooleanfalsenoIndividual playlist videos will loop, rather than the whole list itself.
slideshowBooleanfalsenoForce the component to display fallback images / poster rather than videos.
onPlayingFunctionnullnoRegister a callback for when the video / slideshow starts playing.
onPauseFunctionnullnoRegister a callback for when the video / slideshow is paused.
onTimeFunctionnullnoEmits regular time-tracking events from Drive-In lib with current media item play position.
onTimeFrequencyNumber500noFrequency at which to emit time-tracking events.
onCanPlayFunctionnullnoCallback for when a loaded media item can play.
playbackRateNumber1.0noAdjust the playback rate of videos. Per the HTML5 video method.

You can clone this repo and then:

npm install && gulp

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

See the License file.