2

シンプルなシークバー用のTubeplayer jqueryプラグインで使用するためにJquery uiスライダーを適応させようとしています。バーのどこかをクリックすると適切にシークするようになりましたが、ビデオの再生中にスライダーを自動的に移動させることはできません。ここに私の作業コードのスニペットがあります:

$.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/しかし、それらがどのようになっているのか理解できないようですシークバーのcurrentTimeで変化するcssの「幅」と「左」のプロパティを実現します。これをプラグインで動作させるのに本当に苦労しています。どんな助けでも大歓迎です!! ありがとう！！

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 に答える