Fun w/FlowPlayer

by deanpeters

HTML

<link rel="stylesheet" href="http://releases.flowplayer.org/5.5.0/skin/minimalist.css">
<script src="http://releases.flowplayer.org/5.5.0/flowplayer.min.js"></script>
<div class="myPlayer">
    <!-- 
   <video>
       <source type="video/webm" src="http://stream.flowplayer.org/night3/640x360.webm" />
       <source type="video/mp4"  src="http://stream.flowplayer.org/night3/640x360.mp4" />
   </video>
-->
</div>


<div>
    <button id="clickme">Play 0</button>
    <button id="clickme1">Play 1</button>
</div>

CSS

body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }
.player { width: 480px; border: 2px solid lime; }

JavaScript

$(function () { // ensure DOM is ready
 
   // this will install flowplayer into an element with id="player"
   $(".myPlayer").flowplayer({
      // one video: a one-member playlist
      playlist: [
         // a list of type-url mappings in picking order
         [
            { fvplayer: "http://www.youtube.com/watch?v=IjScvb5hiw0'" },
            { mp4: "http://sxsw.ramp.com/hosting/media/sxsw/1626298/ed_1024_512kb.mp4" },
            { mp4: "http://sxsw.ramp.com/hosting/media/sxsw/1626298/sintel-1024-surround.mp4" }
         ]
      ],
      ratio: 3/4,   // video with 4:3 aspect ratio
      splash: true  // a splash setup
   }).eq(0).data("flowplayer");;
 
});  


/*


[fvplayer src='http://www.youtube.com/watch?v=H8Cuqo45r-M']
Youtube ID only:
[fvplayer src='szjZxij0A7o']
Full Vimeo URL:
[fvplayer src='http://vimeo.com/75113851']
Vimeo ID only:
[fvplayer src='78068001']


file: 'http://www.youtube.com/watch?v=IjScvb5hiw0',
    image: '//i.ytimg.com/vi/IjScvb5hiw0/mqdefault.jpg',

wget http://publishing.ramp.com/thumbnails/cached_media/0006/0006875/0006875054/images/thumb.jpg -O t0006875054.jpg -O t
# wget http://sxsw.ramp.com/hosting/media/sxsw/1626298/ed_1024_512kb.mp4


wget http://publishing.ramp.com/thumbnails/cached_media/0006/0006875/0006875155/images/thumb.jpg -O t0006875155.jpg
# wget http://sxsw.ramp.com/hosting/media/sxsw/1626298/sintel-1024-surround.mp4

*/

/*
$(function(){
                var playlist = [
				   [{mp4: "http://stream.flowplayer.org/night3/640x360.mp4"}],
				   [{mp4: "http://stream.flowplayer.org/night1/640x360.mp4"}],
				   [{mp4: "http://stream.flowplayer.org/night5/640x360.mp4"}],
				   [{mp4: "http://stream.flowplayer.org/night6/640x360.mp4"}]
				]
                
               var player = $(".myPlayer").flowplayer({
                    playlist: playlist,
                    advance : false,
                   width: 480

                }).eq(0).data("flowplayer");
               // var player =...