diff --git a/README.md b/README.md index 68343ec..ff63e76 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@ React media container component to help build video & audio players. - [x] Fix Progress component - [x] Fix Volume getting locked up when player is muted - [] SeekBar crashes Safari -- [] Playlist feature -- [] Show time preview when hovering scrubber -- [] Show thumbnail preview when hovering scrubber +- [x] Playlist feature +- [] Loading state to allow loaders for loading big/new media +- [] Show time/thumbnail preview when hovering seekbar - [] Subtitle support - [] Forward / Rewind - [] Playback speed option diff --git a/example/index.jsx b/example/index.jsx index f716d9b..4c30931 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -3,16 +3,16 @@ import { MediaContainer, PlayPause, Progress, SeekBar, MuteUnmute, Volume, Fulls import './main.scss'; -// Demo Video Links -// http://demosthenes.info/assets/videos/mountain.mp4 -// http://www.w3schools.com/html/movie.mp4 -// https://pdlvimeocdn-a.akamaihd.net/47099/675/231401431.mp4?token2=1439167198_ea59cfaccb25a955c76114630f028b2d&aksessionid=955e6d7a9e35065288e1fad71df1b989fdad13dc1439152798 -// http://simplypx.com/images/Prometheus.mp4 -// http://jelmerdemaat.nl/online-demos/conexus/video/small.mp4 -// http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v -// http://html5demos.com/assets/dizzy.mp4 -// http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -// https://vid4u.org/ninja/5/dev/assets/madmax-intro.mp4 +const mediaLinks = [ + {src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', label: 'Big Buck Bunny'}, + {src: 'https://vid4u.org/ninja/5/dev/assets/madmax-intro.mp4', label: 'Mad Max Intro'}, + {src: 'http://demosthenes.info/assets/videos/mountain.mp4', label: 'Mountain'}, + {src: 'http://www.w3schools.com/html/movie.mp4', label: 'Bear'}, + {src: 'http://simplypx.com/images/Prometheus.mp4', label: 'Prometheus'}, + {src: 'http://jelmerdemaat.nl/online-demos/conexus/video/small.mp4', label: 'Lego Robot'}, + {src: 'http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v', label: 'iPod Help'}, + {src: 'http://html5demos.com/assets/dizzy.mp4', label: 'Dizzy Kitty'}, +]; class App extends Component { @@ -28,6 +28,10 @@ class App extends Component { this.refs['media-player'].toggleFullscreen(); } + _loadMedia(src) { + this.refs['media-player'].load(src); + } + render() { return( @@ -75,6 +79,20 @@ class App extends Component { onFullscreen={::this._handleFullscreen} /> + + ); }} diff --git a/example/main.scss b/example/main.scss index 959c6da..ccd2550 100644 --- a/example/main.scss +++ b/example/main.scss @@ -1,3 +1,8 @@ +video { + width: 100%; + max-width: 500px; +} + // hide native controls video::-webkit-media-controls { display: none !important; diff --git a/src/MediaContainer.jsx b/src/MediaContainer.jsx index 68367e4..1b398eb 100644 --- a/src/MediaContainer.jsx +++ b/src/MediaContainer.jsx @@ -45,6 +45,14 @@ class MediaContainer extends Component { } } + stop() { + + const { player } = this.state; + + player.pause(); + player.currentTime = 0; + } + muteUnmute() { const { player } = this.state; @@ -86,6 +94,35 @@ class MediaContainer extends Component { } } + load(src) { + + // function setupURL(id, ext) { + // return urlBase + id + "." + ext; + // } + + const { player } = this.state; + + // pause player + player.pause(); + + // test support + // !!!! need to check canPlayType on init + if(player.canPlayType('video/mp4')) { + player.setAttribute('src', src); + //player.setAttribute('src', setupURL(src, 'mp4')); + } else if(player.canPlayType('video/webm')) { + player.setAttribute('src', setupURL(src, 'webm')); + } else if(player.canPlayType('video/ogg')) { + player.setAttribute('src', setupURL(src, 'ogv')); + } + + // load new media + player.load(); + + // play new media + player.play(); + } + // Private Methods _setPlayer(cb) {