title: html5 videojs playlist setup
body: <p>I want to implement videojs player on a sharepoint site. I have been able to setup the video player with one static video source for the player. Now I want to have a list of video urls on the side of the player, which user can click on and load the video on the same player. Something close has been done here: <a href="http://jsfiddle.net/Barzi/Jzs6B/9/" rel="nofollow">http://jsfiddle.net/Barzi/Jzs6B/9/</a> but without using videojs.</p>
  
  <p>How can I do something similar with videojs implementation? <a href="http://jsfiddle.net/6nJ4z/" rel="nofollow">http://jsfiddle.net/6nJ4z/</a></p>
  
  <pre><code>&lt;div id="html5videoplayer" style="font-family: Arial Unicode MS;"&gt;
    &lt;video id="videoarea" class="video-js vjs-default-skin" controls preload="none"  data-setup="{}"&gt; 
      &lt;!--&lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /&gt;--&gt;
    &lt;/video&gt;
  &lt;/div&gt;
  
  &lt;ul id="playlist"&gt;
      &lt;li&gt;&lt;a href="http://html5videoformatconverter.com/data/images/happyfit2.mp4"&gt;Happy Fit&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4"&gt;Sintel&lt;/a&gt;&lt;/li&gt;      
      &lt;li&gt;&lt;a href="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm"&gt;Big Buck Bunny&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>