2

我正在尝试调整 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”属性随着seekbar中的currentTime而变化。我很难让它与我的插件一起使用。任何帮助深表感谢！！谢谢！！

4

1 回答 1

2

我花了太长时间才弄清楚这一点。归结为缺乏对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);
},

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

于 2012-06-07T05:55:03.610 回答