0

我正在根据这里的教程编写自己的视频播放器

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

这是处理滑块的代码：

//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 爱好者，这是我第一次使用插件，所以我不知道该怎么做。在谷歌上也找不到太多。

谢谢你的时间

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

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

我已将其更改为如下所示：

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

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

未捕获的异常：无法在初始化之前调用方法：试图调用方法“选项”

我在滑块 api 文档中找不到任何东西来初始化滑块。我确定会在createSeek上面的函数中完成吗？

4

1 回答 1

2

您的代码createSeek()正在尝试在不阻止进一步执行的情况下初始化滑块（您无需等待成功并继续不管是否发生了初始化），然后，当它seekUpdate尚未准备好时，$lVideo.attr('readyState')可能是错误的。

尝试在调用之后或之前移动$lVideo.bind('timeupdate', seekUpdate);，createSeek如下$video_controls.show();所示：

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

PS：你为什么不像往常一样简单地声明函数
function myEvilFn() { /* evil code */ }呢？
调试时，您将能够在堆栈框架中看到函数的名称，您也不应该关心它们的顺序。如果您想隐藏它们，请将它们放在另一个函数或 lambda 中）。但是使用赋值 ( var fn=function(){...}) 只会使它们的顺序变得不必要地重要。

于 2012-11-14T07:03:51.053 回答