Add support for subtitle tracks in FilePlayer

Fixes #214

README.md

@@ -122,17 +122,17 @@ Prop | Description
 
 Both `youtubeConfig`, `vimeoConfig`, `dailymotionConfig` props can take a `preload` value. Setting this to `true` will play a short, silent video in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab.
 
-#### Multiple Sources
+#### Multiple Sources and Tracks
 
 When playing file paths, an array of sources can be passed to the `url` prop to render multiple `<source>` tags.
 
-```js
+```jsx
 <ReactPlayer playing url={['foo.webm', 'foo.ogg']} />
 ```
 
 You can also specify a `type` for each source by using objects with `src` and `type` properties.
 
-```js
+```jsx
 <ReactPlayer
   playing
   url={[
@@ -142,6 +142,23 @@ You can also specify a `type` for each source by using objects with `src` and `t
 />
 ```
 
+[`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) elements for subtitles can be added using `fileConfig`:
+
+```jsx
+<ReactPlayer
+  playing
+  url='foo.webm'
+  fileConfig={{
+    tracks: [
+      {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
+      {kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},
+      {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
+    ]
+  }}
+/>
+```
+
+
 ### Methods
 
 Use [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to call methods on the player. See [the demo app](src/demo/App.js) for an example of this.

src/players/FilePlayer.js

@@ -107,6 +107,9 @@ export default class FilePlayer extends Base {
     const { src, type } = source
     return <source key={src} src={src} type={type} />
   }
+  renderTrack = (track, index) => {
+    return <track key={index} {...track} />
+  }
   ref = player => {
     this.player = player
   }
@@ -134,6 +137,9 @@ export default class FilePlayer extends Base {
         {url instanceof Array &&
           url.map(this.renderSource)
         }
+        {fileConfig.tracks instanceof Array &&
+          fileConfig.tracks.map(this.renderTrack)
+        }
       </Element>
     )
   }

src/props.js

@@ -38,6 +38,7 @@ export const propTypes = {
   }),
   fileConfig: shape({
     attributes: object,
+    tracks: array,
     forceAudio: bool,
     forceHLS: bool,
     forceDASH: bool
@@ -91,6 +92,7 @@ export const defaultProps = {
   },
   fileConfig: {
     attributes: {},
+    tracks: [],
     forceAudio: false,
     forceHLS: false,
     forceDASH: false