캐치되지 않는 예외 : 초기화 이전에 슬라이더의 메서드를 호출 할 수 없습니다. 메서드 '값'을 호출하려고 시도했습니다.

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와 버프의 많은 아니에요이 내가 플러그인에서 일하고 있어요 처음이다, 그래서 나는 무엇을 할 생각이 없다 이것에 관해서. Google에서도 많은 것을 찾을 수 없습니다. 시간에 대한

감사

편집
나는 슬라이더 위젯의 JQuery와 UI의 API 사양을 겪었 나는 아마 잘못 슬라이더 값을 설정 한 것으로 나타났습니다 :

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

다음과 같이 변경했습니다.

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

불행히도 동일한 오류가 발생합니다 :

uncaught exception: cannot call methods prior to initialization: attempted to call method 'option'

슬라이더를 초기화하기 위해 슬라이더 API에서 아무 것도 찾을 수 없습니다. 위의 createSeek 함수에서이 작업이 완료 되었습니까?

Answer 1

createSeek()에있는 코드는 추가 실행을 차단하지 않고 슬라이더를 초기화하려고합니다 (성공을 기다리지 않고 초기화가 발생했는지 여부를 regargdless로 계속 함). 그런 다음 seekUpdate과 같이 준비되지 않았습니다. $lVideo.attr('readyState')은 아마도 거짓입니다.

시도 후 또는 그 이전 createSeek 내부 $lVideo.bind('timeupdate', seekUpdate);를 이동하는 것과 같은 $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 */ } 같은 평소와 같이 함수를 선언하지?
디버깅 할 때 스택 프레임의 함수 이름을 볼 수 있으며 또한 순서에 신경 쓰지 않아도됩니다. 숨기려면 다른 함수 나 람다에 넣으십시오.) 하지만 과제 (var fn=function(){...})를 사용하면 순서를 불필요하게 중요하게 만듭니다.