FlowPlayer API load problem

HTML

<script src="http://releases.flowplayer.org/5.4.6/flowplayer.js"></script>
<link rel="stylesheet" href="http://releases.flowplayer.org/5.4.6/skin/functional.css">
<div id="video-player" style="width: 640px; height: 360px;">
    <video preload="none">
     <source type="application/x-mpegurl"
        src="http://wms.shared.streamshow.it/telesanremo/telesanremo/playlist.m3u8"></source>
        <source
            type="video/mp4"
            src="http://stream.flowplayer.org/playful/624x260.mp4"
        ></source>
   </video>
</div>

<br><br>
<button id="load-video">Load another video!</button>

JavaScript

(function($, flowplayer) {
    "use strict";
    
    $(function() {
        
        var $player = $('#video-player');
        
        $player.flowplayer();
        
        $('#load-video').click(function() {
            var api = flowplayer($player);
            api.load([
                {webm: 'http://stream.flowplayer.org/black/470x250.webm'},
                {mp4: 'http://stream.flowplayer.org/black/470x250.mp4'}
            ], function() {
                alert('Video loaded!');
            });
        });
    });
    
})(jQuery, flowplayer);