API for adding additonal players to ReactPlayer in runtime

README.md

@@ -234,6 +234,23 @@ If you aren’t using React, you can still render a player using the standalone
 
 See [`jsFiddle` example](https://jsfiddle.net/krkcvx9s/)
 
+#### Adding your own players
+
+If you have your own player, that compatible with ReactPlayer's internal architecture, you can use it like this:
+
+```javascript
+import YourOwnPlayer from './somewhere';
+ReactPlayer.addAdditionalPlayer(YourOwnPlayer);
+```
+
+Or you can clear all additional players:
+
+```javascript
+ReactPlayer.clearAdditionalPlayers();
+```
+
+All responsibilities for keeping your player's API compatible with ReactPlayer is on you.
+
 #### Using Bower
 
 ```bash

src/ReactPlayer.js

@@ -9,7 +9,15 @@ import renderPreloadPlayers from './preload'
 
 const SUPPORTED_PROPS = Object.keys(propTypes)
 
+let additionalPlayers = []
+
 export default class ReactPlayer extends Component {
+  static addAdditionalPlayer = player => {
+    additionalPlayers.push(player)
+  }
+  static clearAdditionalPlayers = () => {
+    additionalPlayers = []
+  }
   static displayName = 'ReactPlayer'
   static propTypes = propTypes
   static defaultProps = defaultProps
@@ -19,6 +27,11 @@ export default class ReactPlayer extends Component {
         return true
       }
     }
+    for (let Player of additionalPlayers) {
+      if (Player.canPlay(url)) {
+        return true
+      }
+    }
     return false
   }
   config = getConfig(this.props, defaultProps, true)
@@ -56,6 +69,11 @@ export default class ReactPlayer extends Component {
         return Player
       }
     }
+    for (let Player of additionalPlayers) {
+      if (Player.canPlay(url)) {
+        return Player
+      }
+    }
     // Fall back to FilePlayer if nothing else can play the URL
     return FilePlayer
   }

test/specs/ReactPlayer.js

@@ -4,6 +4,7 @@ import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 
 import ReactPlayer from '../../src/ReactPlayer'
+import { FilePlayer } from '../../src/players/FilePlayer'
 
 const { describe, it, expect, beforeEach, afterEach } = window
 
@@ -427,4 +428,34 @@ describe('ReactPlayer', () => {
       expect(el.querySelectorAll('video').length).to.equal(1)
     })
   })
+
+  describe('additional players', () => {
+    class AdditionalPlayer extends React.Component {
+      static canPlay = url => true
+      static displayName = 'AdditionalPlayer'
+      load () {}
+      render () {
+        return (
+          <div />
+        )
+      }
+    }
+
+    it('could be added with usage of static method', () => {
+      ReactPlayer.addAdditionalPlayer(AdditionalPlayer)
+      renderPlayer({
+        url: 'test:url'
+      })
+      expect(player.player.player instanceof AdditionalPlayer).to.be.true
+    })
+
+    it('could be cleared with usage of static method', () => {
+      ReactPlayer.clearAdditionalPlayers()
+      renderPlayer({
+        url: 'test:url'
+      })
+
+      expect(player.player.player instanceof FilePlayer).to.be.true
+    })
+  })
 })