jquery-ui - Jquery UI slider - Tubeplayer 插件的 Seekbar

Question

我正在尝试调整 Jquery ui slider 以与 Tubeplayer jquery 插件一起使用，以实现简单的搜索栏。当您单击某处的栏时，我已经让它适本地寻找，但我无法让 slider 在视频播放时自行移动。这是我的工作代码片段:

$.tubeplayer.defaults = {

            afterReady: function($player){$( "#slider" ).slider({
                                value:0,
                                orientation: "horizontal",
                                range: "min",
                                max: $("#youtube-player-container").tubeplayer("data").duration,
                                step:1,
                                animate: true,
                                slide:  function(event, ui) {
                                         jQuery("#youtube-player-container").tubeplayer("seek",ui.value);
                                     }

                                    });                         
},

我知道这段代码不会解决随视频移动的幻灯片 handle 的问题，只会在单击时寻找视频中的正确时间。 slider 移动有什么简单的解决方案吗？我已经写了一个手册 while 循环，但它似乎挂起了东西:

onPlayerPlaying: function(){
        var playing = 1;
        while(playing == 1){    
        var cur = $("#youtube-player-container").tubeplayer("data").currentTime;
        var dur = $("#youtube-player-container").tubeplayer("data").duration;
        if(cur<dur){
            $( "#slider" ).slider( "option", "value", cur);
}}},

我还在这里看到了一个例子:http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/但似乎无法弄清楚他们如何实现 css“宽度”和“左”属性随搜索栏中的 currentTime 变化。我很难让它与我的插件一起工作。任何帮助深表感谢!!谢谢!!

Answer 1

我花了太长时间才弄清楚这一点。归根结底是缺乏javascript知识。我只需要 setInterval() 方法。这是我的工作代码:

onPlayerPlaying: function(){

        var seekUpdate='';
        seekUpdate=setInterval(function(){
        var cur = Math.floor($("#youtube-player-container").tubeplayer("data").currentTime);
        var time =  Math.floor(cur*254/dur);
        $(".ui-slider-handle").css("left",time);
        $(".ui-slider-range").css("width",time);
        },100);
        },

以及我更新的 slider 初始化调用:

$.tubeplayer.defaults = {

    afterReady: function($player){$( "#slider" ).slider({
                                range: "min",
                                max: 254,
                                step:1,
                                animate: true,
                                slide:  function(event, ui) {
                                         jQuery("#youtube-player-container").tubeplayer("seek",(ui.value/254)*dur);
                                         clearInterval(seekUpdate);
                            },

                    }); 

},

暂停时，只是为了更好地衡量:

onPlayerPaused: function(){
        var cur = Math.floor($("#youtube-player-container").tubeplayer("data").currentTime);
        var time =  Math.floor(cur*254/dur);
        $( "#slider" ).slider( "option", "value", time);
},

这一切都可以完美地使用带有 HTML5 支持的 Tubeplayer 插件创建一个功能齐全的自定义 jquery ui slider 搜索栏!令人惊叹的定制 Youtube 无 Chrome 播放器解决方案，带移动支持。一定喜欢那个!