diff --git a/README.md b/README.md
index 578fb272..89c5e6dd 100644
--- a/README.md
+++ b/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
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 9090e04c..774ca663 100644
--- a/src/ReactPlayer.js
+++ b/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 (
- {players.map(this.renderPlayer)}
+ {this.renderPlayers()}
)
}
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index c5b42366..74274494 100644
--- a/src/players/FilePlayer.js
+++ b/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
diff --git a/test/karma/canPlay.js b/test/karma/canPlay.js
index cebfa6e3..87927cd7 100644
--- a/test/karma/canPlay.js
+++ b/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
- })
- })
})