gistfile1.txt

# React Media

A controls-free video and audio playback React.js component.

Includes a Flash-based fallback.


## Status

Work in progress for our internal needs, but designed to be readily usable
in any React.js project.


## Prerequisites

- Install Adobe Flex SDK 4.6
- Set `$FLEX_HOME`


## Compilation

This (currently) only compiles the Flash code.

JavaScript is built on demand during development, but consumers of this
library must build the JavaScript themselves. See the Webpack config.

```bash
npm run build
```


## Development

```bash
npm run dev
open http://localhost:8081/webpack-dev-server/src/dev/
```


## Usage

```javascript
var Media = require('react-media');

<Media
  play={true}
  sources={[{
    type: 'video',
    format: 'video/webm',
    url: 'http://example.com/sample.webm',
  }]}
/>
```

See `./dev/index.jsx` for an example media player.

### Component Props

`sources`
An array of objects with keys `type`, `format`, and `url`.
Valid types are `audio` and `video`. Formats are mimetypes. Required.
To support seekable streams, if the string `[start]` appears in a url, it will
be substituted with a time in seconds.

`seek`
Time in seconds to seek to and begin playback from.  Defaults to 0.

`play`
Boolean indicating if the media should play when ready. Defaults to false.

`volume`
Ranges from 0.0 to 1.0. Defaults to 1.0.

`width` and `height`
Video display size. Measured in pixels. Defaults to native video size.

`onChange`
A callback given an object of changed media state keys (documented below).


### OnChange Keys

`time`
The current playback time in seconds.

`width` and `height`
Sizes measured in pixels parsed from the video stream.

`duration`
Length of media in seconds parsed from the media stream.

`playing`
Boolean indicating if the media is currently playing.

`buffered`
An ordered, non-overlapping array of {time, duration} objects representing
an approximation of the loaded portions of the media stream.

`buffering`
Number ranging from 0.0 to 1.0 indicating an approximate download progress
before playback can proceed.

`debug`
Set to true to spew debugging log messages to the console.


### Mobile Support

On iPad and other tablet devices, media will only play after an initial
user-interaction. Due to the way the React.js render loop works, the props
set on the media player don't count as a user interaction. In order for this to
work, you'll need something like this:

```javascript
onClick: function() {
  Media.activate();
},
```

The example media player does this in response to toggling play/pause.