New! Multi-mode. Check it out.

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 5k minified and gzipped.

React Drive-in allows you to add fullscreen video to your website. Much like BigVideo.js, it can play a video or a playlist of videos, either silently or with original audio, and falls back to images for devices that don't support autoplay for ambient video.

Installation

React Drive-in is super easy to install. React is the only dependency. npm is the easiest way to install React Drive-in.

npm install --save react-drive-in

Alternatively, you can download the latest release.

Usage

The simplest example:

var DriveIn = require('react-drive-in');
var $mountNode = document.getElementById('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
);

For cross-browser fallbacks, you can pass an array with multiple formats to Drive-in:

var DriveIn = require('react-drive-in');
var $mountNode = document.getElementById('drive-in');

var videoWithFallbacks = [
    "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.webm",
    "http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.ogv"
];

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

More complex:

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

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

    var playlist = [
        [
            'http://dfcb.github.io/BigVideo.js/vids/river.mp4',
            'http://dfcb.github.io/BigVideo.js/vids/river.ogv',
            'https://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/river.jpg'
        ],
        [
            'http://dfcb.github.io/BigVideo.js/vids/dock.mp4',
            'http://dfcb.github.io/BigVideo.js/vids/dock.ogv',
            'http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/dock.jpg'
        ],
        [
            '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 onCanPlay = function() {};
    var onPlaying = function(itemNum) {};
    var onPause = function() {};
    var onTime = function(playPosition) {};
    var onTimeFrequency = 500;

    React.render(
    <DriveIn
        showPlaylist = {playlist}
        onPlaying = {onPlaying}
        onPause = {onPause}
        loop = {true}
        slideshow = {false}
        mute = {true}
        onCanPlay = {onCanPlay}
        onTime = {onTime}
        onTimeFrequency = {onTimeFrequency}
        />,
    $mountNode
);

Formats

React Drive-in current supports the following formats: mp4, ogv, webm, jpg, gif, and png.

What to show

show is for single items. You can provide a string or a fallback array, e.g. [ 'video.mp4', 'video.ogv', 'video.jpg' ].

showPlaylist is for multiple items. You can provide an array of strings, e.g. [ 'video1.mp4', 'video2.mp4' ] or an array of fallback arrays, e.g. [ [ 'video1.mp4', 'video1.ogv' ], [ 'video2.mp4', 'video2.ogv' ] ]

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.

Other properties

When initializing React Drive-in you may also choose to alter its behavior in a variety of ways. You can choose whether to mute the video(s), whether they loop, or force an image-only slideshow using the image fallbacks for your videos.

onPlaying

Register a callback for when the video / slideshow starts playing.

onTime / onTimeFrequency

Register a callback for regular time-tracking events with the current media item play position, and control the the frequency the time-tracking events are emitted.

Try for yourself

React Drive-in's API allows for some powerful interactions.

Mode Selection

Item selection (Now Playing: )

Toggle Play / Mute

For full documentation for this project, check out its Github repository.