1

応用

上には、スライダーにビデオを含むアプリケーションがあります。スライダーには2つのビデオがあります。最初のビデオを再生してから、ビデオを停止せずに、スライダーの [次へ] をクリックして次のビデオにスライドし、そのビデオを再生してください。両方のビデオが同時に再生されていることがわかります。

私の質問は、スライドされたときにビデオの再生を停止することは可能ですか?

ビデオの再生にはjwplayerを使用し、スライダーには基本的なjqueryスライダーを使用しています。

コードは以下のとおりです。

 <div id="banner-video_<?php echo $key; ?>">
 <ul class="bjqs">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<li><div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...

<script type="text/javascript">


jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
    file: "<?php echo 'VideoFiles/'.$v; ?>",
    width: 480,
    height: 270
});

<?php $i++; ?>
</script>

</div>
</li>
<?php } ?>
</ul>
</div>

         <script type="text/javascript">

jQuery(document).ready(function($) {

         $('#banner-video_<?php echo $key; ?>').bjqs({
            animtype      : 'slide',
            height        : 300,
            width         : 700,
            responsive    : true,
            randomstart   : false,
            automatic : false
          });  
          });

          </script>

<?php

    }
        //end:procedure video
?>
4

3 に答える 3

1

bjqのソースに一時停止するコマンドを追加する必要があります。縮小されていないバージョンを使用してみてください。変更が簡単になり、満足したら再度縮小できます。422 行目の bjqs では、

            $c_wrapper.on('click','a',function(e){

            e.preventDefault();
            var direction = $(this).attr('data-direction');

            if(!state.animating){

                if(direction === vars.fwd){
                    go(vars.fwd,false);
                }

                if(direction === vars.prev){
                    go(vars.prev,false);
                }

            }

        });

次のようにリンクがクリックされたときにすべてのプレーヤーを一時停止するコマンドを追加します(例のコードを使用):

            $c_wrapper.on('click','a',function(e){

            e.preventDefault();
            jwplayer("myElement-70-0").pause();
            jwplayer("myElement-70-1").pause();
            var direction = $(this).attr('data-direction');

            if(!state.animating){

                if(direction === vars.fwd){
                    go(vars.fwd,false);
                }

                if(direction === vars.prev){
                    go(vars.prev,false);
                }

            }

        });

動的にしたい場合は、スライダーの要素をループできます..ビデオ要素に名前を付けるためのルールを使用する限り、次のようになります

            $('li.bjqs-slide').each( function(index) {
                jwplayer("myElement-70-"+index).pause();
            });

ビデオを含まないスライドが必要な場合は、クラスを jwplayer 要素に追加し、それぞれを使用するだけです。すべての jwplayer 要素にクラス .playjw があるとします。次のようにします。

            $('.playjw').each( function(index) {
                jwplayer("myElement-70-"+index).pause();
            });

それが役に立てば幸い！

于 2013-02-14T22:04:41.693 に答える
1

JQuery プラグイン「basic-jquery-slider」には、ナビゲーション テキスト「perv」と「next」がクリックされたときのイベント通知がありませんが、data-direction属性を使用してそれらをフックできます。

JwPlayer documentationによると、次のようにビデオを操作できますjwplayer()

APIはすべての可能性を説明します

$('[data-direction="forward"]').click(function(){
    jwplayer().pause();
});

$('[data-direction="previous"]').click(function(){
    jwplayer().pause();
});

コンソールを使用してビデオを一時停止するテストを行ったところ、動作しました。クリック イベントをボタンにバインドすることもできます。

于 2013-02-14T06:59:39.353 に答える
0

スライド アニメーションがトリガーされたら、jwplayer('player').pause();またはを呼び出す必要がありますjwplayer('player').stop();。

于 2013-02-14T04:59:00.103 に答える