Render FilePlayer by default

Fall back to FilePlayer if no other players can play the given URL
Still renders Youtube or Vimeo if the preload config option is set

README.md

@@ -113,8 +113,6 @@ Both `youtubeConfig` and `vimeoConfig` props can take a `preload` value. Setting
 
 ### Methods
 
-There is a static method  `ReactPlayer.canPlay(url)` to determine if a URL can be played by the media player. Note that this does *not* detect media that is unplayable due to streaming permissions etc. In that case, `onError` will occur after attemping to play.
-
 To seek to a certain part of the media, there is a `seekTo(fraction)` instance method that will seek to the appropriate place in the media. See `App.js` for an example of this using `refs`.
 
 ### Supported media

src/ReactPlayer.js

@@ -2,15 +2,15 @@ import 'es6-promise'
 import React, { Component } from 'react'
 
 import { propTypes, defaultProps } from './props'
-import players from './players'
+import YouTube from './players/YouTube'
+import SoundCloud from './players/SoundCloud'
+import Vimeo from './players/Vimeo'
+import FilePlayer from './players/FilePlayer'
 
 export default class ReactPlayer extends Component {
   static displayName = 'ReactPlayer'
   static propTypes = propTypes
   static defaultProps = defaultProps
-  static canPlay (url) {
-    return players.some(player => player.canPlay(url))
-  }
   componentDidMount () {
     this.progress()
   }
@@ -52,6 +52,26 @@ export default class ReactPlayer extends Component {
     }
     this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency)
   }
+  renderPlayers () {
+    const { url, youtubeConfig, vimeoConfig } = this.props
+    const players = []
+    if (YouTube.canPlay(url)) {
+      players.push(YouTube)
+    } else if (SoundCloud.canPlay(url)) {
+      players.push(SoundCloud)
+    } else if (Vimeo.canPlay(url)) {
+      players.push(Vimeo)
+    } else if (url) {
+      players.push(FilePlayer)
+    }
+    if (!YouTube.canPlay(url) && youtubeConfig.preload) {
+      players.push(YouTube)
+    }
+    if (!Vimeo.canPlay(url) && vimeoConfig.preload) {
+      players.push(Vimeo)
+    }
+    return players.map(this.renderPlayer)
+  }
   renderPlayer = Player => {
     const active = Player.canPlay(this.props.url)
     const { youtubeConfig, soundcloudConfig, vimeoConfig, fileConfig, ...activeProps } = this.props
@@ -74,7 +94,7 @@ export default class ReactPlayer extends Component {
     }
     return (
       <div style={style} className={this.props.className}>
-        {players.map(this.renderPlayer)}
+        {this.renderPlayers()}
       </div>
     )
   }

src/players/FilePlayer.js

@@ -2,18 +2,12 @@ import React from 'react'
 
 import Base from './Base'
 
-const MEDIA_PROTOCOLS = /^rtsp:\/\//i
-const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i
 const AUDIO_EXTENSIONS = /\.(mp3|wav|m4a)($|\?)/i
 
 export default class FilePlayer extends Base {
   static displayName = 'FilePlayer'
   static canPlay (url) {
-    return (
-      MEDIA_PROTOCOLS.test(url) ||
-      VIDEO_EXTENSIONS.test(url) ||
-      AUDIO_EXTENSIONS.test(url)
-    )
+    return true
   }
   componentDidMount () {
     this.player = this.refs.player

test/karma/canPlay.js

@@ -1,7 +1,6 @@
 import SoundCloud from '../../src/players/SoundCloud'
 import YouTube from '../../src/players/YouTube'
 import Vimeo from '../../src/players/Vimeo'
-import FilePlayer from '../../src/players/FilePlayer'
 
 const { describe, it, expect } = window
 
@@ -45,28 +44,4 @@ describe('canPlay', () => {
       expect(Vimeo.canPlay('https://www.youtube.com/watch?v=1234')).to.be.false
     })
   })
-
-  describe('FilePlayer', () => {
-    it('knows what it can play', () => {
-      expect(FilePlayer.canPlay('http://example.com/file.mp4')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.ogg')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.ogv')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.webm')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.mp3')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.wav')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.mp4?foo=1&bar=2')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.ogg?foo=1&bar=2')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.ogv?foo=1&bar=2')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.webm?foo=1&bar=2')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.mp3?foo=1&bar=2')).to.be.true
-      expect(FilePlayer.canPlay('http://example.com/file.wav?foo=1&bar=2')).to.be.true
-    })
-
-    it('knows what it can\'t play', () => {
-      expect(FilePlayer.canPlay('http://example.com/file.mp5')).to.be.false
-      expect(FilePlayer.canPlay('http://example.com/file.ogh')).to.be.false
-      expect(FilePlayer.canPlay('http://example.com/file.web')).to.be.false
-      expect(FilePlayer.canPlay('http://example.com/file.txt')).to.be.false
-    })
-  })
 })