Add FilePlayer for HTML5 media files

Author: cookpete

src/App.js

@@ -58,6 +58,9 @@ export default class App extends Component {
         <button onClick={this.load.bind(this, 'https://www.youtube.com/watch?v=oUFJJNQGwhk')}>Youtube video</button>
         <button onClick={this.load.bind(this, 'https://soundcloud.com/miami-nights-1984/accelerated')}>Soundcloud song</button>
         <button onClick={this.load.bind(this, 'https://vimeo.com/90509568')}>Vimeo video</button>
+        <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')}>MP4 video</button>
+        <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv')}>OGV video</button>
+        <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm')}>WEBM video</button>
         <input
           type='range' min={0} max={1} step='any'
           value={this.state.played}

src/players/FilePlayer.js

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import propTypes from '../propTypes'
+import Base from './Base'
+
+const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm)$/
+const AUDIO_EXTENSIONS = /\.(mp3|wav)$/
+
+export default class FilePlayer extends Base {
+  static propTypes = propTypes
+  static canPlay (url) {
+    return VIDEO_EXTENSIONS.test(url) || AUDIO_EXTENSIONS.test(url)
+  }
+  componentDidMount () {
+    this.player = React.findDOMNode(this.refs.player)
+    this.player.onended = this.props.onEnded
+    this.player.onplay = this.props.onPlay
+    this.player.onpause = this.props.onPause
+    super.componentDidMount()
+  }
+  shouldComponentUpdate (nextProps) {
+    return this.props.url !== nextProps
+  }
+  play (url) {
+    this.player.play()
+  }
+  pause () {
+    this.player.pause()
+  }
+  stop () {
+    // No need to stop
+  }
+  seekTo (fraction) {
+    this.player.currentTime = this.player.duration * fraction
+  }
+  setVolume (fraction) {
+    this.player.volume = fraction
+  }
+  getFractionPlayed () {
+    if (this.player.readyState === 0) return 0
+    return this.player.currentTime / this.player.duration
+  }
+  getFractionLoaded () {
+    if (this.player.readyState === 0) return 0
+    return this.player.buffered.end(0) / this.player.duration
+  }
+  render () {
+    const Media = AUDIO_EXTENSIONS.test(this.props.url) ? 'audio' : 'video'
+    return (
+      <Media
+        ref='player'
+        src={this.props.url}
+        width={this.props.width}
+        height={this.props.height}
+        autoPlay
+      />
+    )
+  }
+}

src/players/index.js

@@ -1,5 +1,6 @@
 import YouTube from './YouTube'
 import SoundCloud from './SoundCloud'
 import Vimeo from './Vimeo'
+import FilePlayer from './FilePlayer'
 
-export default [ YouTube, SoundCloud, Vimeo ]
+export default [ YouTube, SoundCloud, Vimeo, FilePlayer ]

test/canPlay.js

@@ -4,6 +4,7 @@ import { expect } from 'chai'
 import SoundCloud from '../src/players/SoundCloud'
 import YouTube from '../src/players/YouTube'
 import Vimeo from '../src/players/Vimeo'
+import FilePlayer from '../src/players/FilePlayer'
 
 describe('YouTube', () => {
   it('knows what it can play', () => {
@@ -43,3 +44,21 @@ describe('Vimeo', () => {
     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
+  })
+
+  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
+  })
+})