FlowPlayer API load problem

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="//releases.flowplayer.org/5.4.6/flowplayer.js"></script>
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/functional.css">
<!-- flowplayer unload does not seem to work. Cannot change video with buttons. -->
<button class='load-video' id="v1">Video 1</button>
<button class='load-video' id="v2">Video 2</button>
<button class='load-video' id="v3">Video 3</button>
<button class='load-video' id="v4">Video 4</button>
<button class='load-video' id="v5">Video 5</button>
<br/>
<!-- flowplayer does not take the width from the div below. The width is from the dots. -->
<div id="d_videoplayer" style="width:360px; background-color:#EEE;"></div>

JavaScript

var vhref = {
    'v1': 'http://www.ithinknext.com/mydata/board/files/F201308021823010.mp4',
        'v2': 'http://stream.flowplayer.org/black/470x250.mp4',
        'v3': 'http://stream.flowplayer.org/night1.mp4',
        'v4': 'http://stream.flowplayer.org/night2.mp4',
        'v5': 'http://stream.flowplayer.org/night3.mp4'
};

var w=350, w1=w;
var h=300, h1=h;

$('#d_videoplayer')
    .dialog({
    autoOpen: false,
    resizable: true,
    width: w,
    height: h,
    modal: false,
    show: 'blind',
    hide: 'blind',
    position: ['center', 50], //Center does not seem to have have effect in Chrom
    title: "Media Player",
    close: function () {
        if (flowplayer()) {
            //last video's dimension
            w1 = flowplayer().video.width;
            h1 = flowplayer().video.height;
            flowplayer().unload();
            alert('Unloading flowplayer on dialog close');
        }
    }
});
//alert('d_videoplayer created');

//Attach the player to a dynamically created dialog
var v = $('#d_videoplayer');

$('.load-video').click(function () {
    //alert($(this).attr('id') + ' clicked');
    w = v.dialog().width(); if (w==0) h=360;
    h = v.dialog().height(); if (h==0) h=300;
    alert(w + ' ' + h + ' ' + w1 + ' '+ h1);
    var fapi = flowplayer();
    console.log(flowplayer());
    console.log(fapi);
    if (fapi) {
        fapi.load(vhref[$(this).attr('id')]);
        fapi.video.width = w; fapi.video.height = h;
    } else {
        v.html('<div style="width:100%; height:100%; min-width:'+w+'px; min-height:'+h+'px;"> <video> <source type="video/mp4" src="' +vhref[$(this).attr('id')]+ '"></video></div>');
        v.flowplayer({
            //adaptiveRatio: true,
            ratio: 9/16,
            embed: false,
            splash: false
        });
    }
    v.dialog('open');
});