added load and stop methods, allows ability to build playlists now

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

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(
       <MediaContainer ref="media-player" type="video">
@@ -75,6 +79,20 @@ class App extends Component {
                   onFullscreen={::this._handleFullscreen}
                 />
               </div>
+
+              <aside className="playlist">
+                <h3 className="playlist__title">Playlist</h3>
+                <ul className="playlist__links">
+                  {mediaLinks.map(link =>
+                    <li
+                      className="playlist__link"
+                      onClick={this._loadMedia.bind(this, link.src)}
+                    >
+                      {link.label}
+                    </li>
+                  )}
+                </ul>
+              </aside>
             </div>
           );
         }}

example/main.scss

@@ -1,3 +1,8 @@
+video {
+  width: 100%;
+  max-width: 500px;
+}
+
 // hide native controls
 video::-webkit-media-controls {
   display: none !important;

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) {