Fun w/FlowPlayer & ads & events

HTML

<script src="http://releases.flowplayer.org/5.4.3/flowplayer.min.js"></script>
<link rel="stylesheet" href="http:////releases.flowplayer.org/5.4.3/skin/minimalist.css">
<script src="releases.flowplayer.org/js/flowplayer.ipad-3.2.13.js"></script>
<h1>Flowplayer 5.4.3</h1>
<div class="player-flow"> 
    <div id="flow" class ="myplayer flowplayer is-splash fixed-controls no-toggle"></div>
</div>

<button class="change" data-video="http://sxsw.ramp.com/hosting/media/sxsw/1626298/ed_1024_512kb.mp4" data-poster="http://publishing.ramp.com/thumbnails/cached_media/0006/0006875/0006875054/images/thumb.jpg">Screencast</button>
<button class="change" data-video="http://bennugd-vlc.googlecode.com/files/sintel_trailer-480p.mp4" data-poster="http://publishing.ramp.com/thumbnails/cached_media/0006/0006968/0006968594/images/thumb.jpg">Go Pro</button>
<button class="change" data-video="http://sxsw.ramp.com/hosting/media/sxsw/1626298/sintel-1024-surround.mp4" data-poster="http://publishing.ramp.com/thumbnails/cached_media/0007/0007031/0007031393/images/thumb.jpg">Fat boy</button>

CSS

/* custom player skin */
   .flowplayer { width: 100%; background-color: #000; background-size: cover; max-width: 800px; }
   .flowplayer .fp-controls { background-color: rgba(0, 0, 0, 0.4) !important;}
   .flowplayer .fp-timeline { background-color: rgba(0, 0, 0, 0.5); top:7px;}
   .flowplayer .fp-progress { background-color: rgba(38, 152, 222, 1)}
   .flowplayer .fp-buffer { background-color: rgba(249, 249, 249, 1)}
   .flowplayer.fixed-controls .fp-time em { bottom: 7px;}
   .flowplayer.fixed-controls .fp-controls { bottom: 0px; height: 24px;}
   .flowplayer .fp-volume { top: 9px;}
   .flowplayer .fp-play { bottom: 2px; border: 1px solid red;}
   .flowplayer .fp-waiting { margin: 27% auto;}

   /* make room for fullscreen button on the controlbar's right side
   no-mute no-volume modifier class combination must be adapted for devices
   which do no support volume controls (e.g. iOS) */
  .flowplayer .fp-timeline {
    margin-right: 180px; /* originally: 165px */
  }
  .no-mute.no-volume.flowplayer .fp-timeline {
    margin-right: 75px; /* originally: 55px */
  }
  .flowplayer .fp-remaining, .flowplayer .fp-duration {
    right: 132px; /* orginally: 120px */
  }
  .no-mute.no-volume.flowplayer .fp-remaining, .no-mute.no-volume.flowplayer .fp-duration {
    right: 34px; /* originally: 10px */
  }
  .flowplayer .fp-volume {
    right: 32px;
  }

  /* shorten volume slider */
  .flowplayer .fp-volumeslider {
    width: 78px;
  }

  /* re-position fullscreen button */
  .flowplayer .fp-fullscreen {
    top: auto; /* allow fullscreen button to move down */
    right: 8px;
    bottom: -1px;
    width: 16px;
    background-position: 0 -197px;
    z-index: 1;
  }
  .flowplayer.is-fullscreen .fp-fullscreen {
    background-position: 0 -217px;
    bottom: 2px;
  }
  .flowplayer .fp-message {
    cursor: default;
    display: none;
    padding: 0 !important;
    text-align: center;
}

JavaScript

var init_source = 'http://sxsw.ramp.com/hosting/media/sxsw/1626298/ed_1024_512kb.mp4'
var init_poster = 'http://publishing.ramp.com/thumbnails/cached_media/0006/0006875/0006875054/images/thumb.jpg'
var type = 'file';
var width = $(window).width();


$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');

flowplayer(function (api,root)
{
    console.log(api);
    api.bind("load",function()
    {
        console.log("api::loadeddata");
        alert("Video Loaded, here's where we can inject an ad");
    }).bind("ready",function()
    {
         console.log("api::ready");
    }).bind("pause",function()
    {
        // http://jsfiddle.net/fm8G8/3/
        console.log("api::paused");
    }).bind("resume",function()
    {
        console.log("api::resumed");
    }).bind("finish",function()
    {
        console.log("api::finished");
    });
});


function flowPlay(source) {
    // console.log("window.flowplayer ===> ", window.flowplayer);
    window.flowplayer.play(source);
}

function loadPlayer (source, type, height, autoplay) {
    if (width < 960) { height = 400; }
    switch(type) {
        case 'file':
            flowPlay(source);
            break;
        case 'youtube':
            break;
        case 'vimeo':
            break;
        default:
    }
}

$('.change').click(function(e){
    e.preventDefault();
    loadPlayer($(this).attr('data-video'), 'file', 300, 1);
});

$(function () {
    // Stuff to do as soon as the DOM is ready;
    $("#flow").flowplayer({
        debug: true,
        volume: 0.5,
		splash: true,
        playlist: [ init_source ],
        poster: [ init_poster ]
        
    });
    window.flowplayer = flowplayer($("#flow"));
    
});