Question

我正在根据教程here

编写自己的视频播放器

当我加载页面时，我收到标题错误。

以下是处理滑块的代码：

//create html structure
//main wrapper
var $video_wrap = $('<div></div>').addClass('logan-video-player').addClass(options.theme).addClass(options.childtheme);
//controls wraper
var $video_controls = $('<div class="logan-video-controls"><a class="logan-video-play" title="Play/Pause"></a><div class="logan-video-seek"></div><div class="logan-video-timer">00:00</div><div class="logan-volume-box"><div class="logan-volume-slider"></div><a class="logan-volume-button" title="Mute/Unmute"></a></div></div>');                     
$lVideo.wrap($video_wrap);
$lVideo.after($video_controls);

//get new elements
var $logan_video_seek = $('.logan-video-seek', $video_container);

var seeksliding;            
var createSeek = function() {
    if($lVideo.attr('readyState')) {
        var video_duration = $lVideo.attr('duration');
        $logan_video_seek.slider({
            value: 0,
            step: 0.01,
            orientation: "horizontal",
            range: "min",
            max: video_duration,
            animate: true,                  
            slide: function(){                          
                seeksliding = true;
            },
            stop:function(e,ui){
                seeksliding = false;                        
                $lVideo.attr("currentTime",ui.value);
            }
        });
        $video_controls.show();                 
    } else {
        setTimeout(createSeek, 150);
    }
};

createSeek();

var gTimeFormat=function(seconds){
    var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
    var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
    return m+":"+s;
};

var seekUpdate = function() {
    var currenttime = $lVideo.attr('currentTime');
    if(!seeksliding) $logan_video_seek.slider('value', currenttime);
    $logan_video_timer.text(gTimeFormat(currenttime));                          
};

$lVideo.bind('timeupdate', seekUpdate);

我不是一个jquery buff，这是我第一次使用插件，所以我不知道该怎么做。谷歌也找不到多少。

感谢您的时间

修改
我已经浏览了滑块小部件的JQuery UI API规范，发现我可能错误地设置了滑块值：

$logan_video_seek.slider('value', currenttime) // see seekUpdate() function above

我把它改为如下：

$logan_video_seek.slider('option', 'value', currenttime);

不幸的是我收到了同样的错误：

未捕获的异常：无法在初始化之前调用方法：尝试调用方法'option'

我无法在滑块api文档中找到任何内容来初始化滑块。我确信这将在上面的createSeek函数中完成？

Answer 1

createSeek()中的代码正在尝试初始化滑块而不阻止进一步执行（您不等待成功并继续无论是否发生初始化），然后，当涉及{{1}时它还没有准备好，因为seekUpdate可能是假的。

尝试在$lVideo.attr('readyState')调用之后或之前在$lVideo.bind('timeupdate', seekUpdate);内移动createSeek：

$video_controls.show();

PS：你为什么不像往常一样像往常一样宣布功能 function createSeek() { if ($lVideo.attr('readyState')) { var video_duration = $lVideo.attr('duration'); $logan_video_seek.slider({ ... }); $lVideo.bind('timeupdate', seekUpdate); // <-- notice line here $video_controls.show(); } else { setTimeout(createSeek, 150); } };？
调试时，您将能够在堆栈框架中看到函数的名称，您也不应该关心它们的顺序。如果你想隐藏它们，把它们放在另一个函数或lambda中）。但是使用赋值（function myEvilFn() { /* evil code */ }）只会使它们的顺序变得不必要。

未捕获的异常：在初始化之前无法调用滑块上的方法;试图调用方法'值'

1 个答案: