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"
        poster="http://dev.dharma.oum.ru/sites/default/files/videos/thumbnails/13520/kaylash-1-eng_0.jpg"
    >
        <source
            type="video/mp4"
            src="http://edoga.dogakoleji.com/QuestionFiles/D4E92054-BFEF-41D5-BFD0-B72D733BF332.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([
                {mp4: 'http://edoga.dogakoleji.com/QuestionFiles/D4E92054-BFEF-41D5-BFD0-B72D733BF332.mp4'},
                {webm: 'http://dev.dharma.oum.ru/sites/default/files/videos/converted/13520/Kaylash-mudrost-vekov_en_www.oum_.ru_webm_1280x720_v3500_a160_1402514481.webm'}
            ], function() {
                alert('Video loaded!');
            });
        });
    });
    
})(jQuery, flowplayer);