Question

我正在尝试使用Jquery ui滑块与Tubeplayer jquery插件一起使用，以获得简单的搜索栏。当你点击某个地方的酒吧时，我已经得到了适当的搜索，但是当视频播放时我无法让滑块自动移动。以下是我工作代码的片段：

$.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);
                                     }

                                    });                         
},

我知道此代码不会解决随视频移动的幻灯片手柄，只会在点击时查找视频中的正确时间。滑块移动的任何简单解决方案？我已经编写了一个手动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“width”和“left”属性随着搜索栏中的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);
        },

我更新的滑块初始化调用：

$.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);
},

这一切都可以很好地创建一个功能齐全的自定义jquery ui滑块搜索栏，使用具有HTML5支持的Tubeplayer插件！惊人的定制Youtube无铬播放器解决方案，带有移动支持。一点都不喜欢！

Jquery UI滑块 - Tubeplayer插件的Seekbar

1 个答案: