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マニアではなく、プラグインに取り組むのはこれが初めてなので、これについてどうすればよいかわかりません。グーグルでもあまり見つかりません。

御時間ありがとうございます

EDIT
スライダーウィジェットのJQuery UI API仕様を調べたところ、おそらくスライダー値を間違って設定していたことがわかりました:

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

以下のように読み替えました。

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

残念ながら、私は同じエラーが発生しています:

キャッチされていない例外: 初期化の前にメソッドを呼び出すことはできません: メソッド 'option' を呼び出そうとしました

ただし、スライダーを初期化するためのスライダーAPIドキュメントには何も見つかりません。createSeek上記の関数でそれが行われると確信していましたか？

4

1 に答える 1

2

あなたのコードは、それ以上の実行をブロックせずcreateSeek()にスライダーを初期化しようとしています (成功を待たず、init が発生したかどうかに関係なく続行します) 。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 */ }ですか?
デバッグすると、スタック フレームに関数の名前が表示されますが、それらの順序は気にする必要はありません。それらを非表示にしたい場合は、別の関数またはラムダ内に配置してください)。しかし、代入 ( var fn=function(){...}) を使用すると、それらの順序が不必要に重要になります。

于 2012-11-14T07:03:51.053 に答える