使用YouTube API自定义进度条

Question

JSFiddle：https://jsfiddle.net/Lbfxgxac/20/

（我的代码必须在HTML部分，否则它将无法正常工作）

我正在为我的网站制作视频播放器，除了让视频播放时更新进度条，我几乎都在工作。现在我只是用一个按钮测试来运行这个更新条形码的代码：

$(document).ready(function() {
    //set vairables
    var curtime;
    var durtime;
    //set progressbar
    $("#prog").progressbar({
        max: durtime,
        value: curtime
    });
});

function updprog() {
    //Set variables
    curtime = player.getCurrentTime();
    durtime = player.getDuration();
    $( "#prog" ).progressbar({
        value: (curtime / durtime) * 100
    });
}

我无法了解如何在YouTube播放器播放时每隔半秒左右运行一次。如果我把它放在while循环中，那么我无法点击任何其他按钮来停止视频或任何东西，因为我的JQuery正在运行循环。

到目前为止，这是我的YouTube代码：

     //asynchronously load youtube api script
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        //insert our youtube script before first script tag dynamically
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;

        //youtube function - onYouTubeIframAPIReady
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '432',
                width: '730',
                videoId: 'tYXftk1tJzw',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        //When youtube player is ready
        function onPlayerReady(e) {
            //e.target.playVideo(); //will make it play automatically
        }

        function onPlayerStateChange(e) {
        }