2

誰かが助けてくれることを願っています。私はこれに対する解決策を検索して検索し、Javascript をいじりましたが、それは私を超えています。他の誰かがこれを理解できることを願っています。

FlexSliderはカルーセルとして素晴らしい仕事をしますが、複数のビデオが必要な場合、FlexSlider アニメーションを停止したり、ユーザーが次のカルーセル スライドをトリガーした場合に自動的に再生を停止したりすることはできません。

1つで十分簡単です。次の Javascript は、これがどのように行われるかを示しています。しかし、ご覧のとおり、ID を持つ要素に依存しています。問題は、不明な量のビデオがあることです。ある場合もあります。場合によっては20になることもあります。

任意の数のビデオを処理できるように、以下のコードを変更する方法はありますか?

var player = document.getElementById('player_1');

$f(player).addEvent('ready', ready);

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
        $('.flexslider').flexslider("pause");
    });
    froogaloop.addEvent('pause', function(data) {
        $('.flexslider').flexslider("play");
    });
}    

$(".flexslider").flexslider({
    animation: "slide",
    animationSpeed: Modernizr.touch ? 600 : 1000,
    slideshowSpeed: 3500,
    controlsContainer: "#carousel",
    useCSS: false,
    start: function(){
        $(".flex-control-nav").css("margin-left", "-" + $(".flex-control-nav").width()/2 + "px");
    },
    before: function(slider){
        $f(player).api('pause');
    }
});

PHP/HTML は次のようになります。

<div class="flexslider">
    <ul class="slides">
    <?php  for($i=0;$i<$slideCount;$i++) { ?>
        <li>
            <?php if($slides[$i]["type"] == "1") { ?>
                <div class="video">
                    <iframe id="player_1" width="1000" height="500" frameborder="0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen src="http://player.vimeo.com/video/<?php echo $slides[$i]["URL"]; ?>?api=1&player_id=player_1"></iframe>
                </div>
            <?php } else { ?>
                <a href="explore.php?item=<?php echo $slides[$i]["slideID"]; ?>">
                <img src="static/images/slides/<?php echo $slides[$i]["slideID"]; ?>/<?php echo $slides[$i]["URL"]; ?>" alt="<?php echo htmlspecialchars($slides[$i]["headline"], ENT_QUOTES, "UTF-8"); ?>" width="868" height="488"  /></a>
            <?php } ?>
<       /li>
    </ul>
</div>

考えられる解決策: FOR ループを実行して動画の数を数え、$f(player)Javascript で のさまざまなインスタンスを多数作成します。より良い方法はありますか？

4

1 に答える 1

4

先に進んだとおっしゃっていましたが、次のスライドに進むときにすべての動画を自動的に一時停止できるようにするのに苦労し、Juanfra Aldasoro（http://juanfra.me/ ）からこのコードに出くわしました。 2012/08 / flexslider-multiple-videos-v2 /）各ビデオに必要なjQueryを作成します。あとは、iframeIDをカウントして名前を付けるだけです。彼のコードは次のとおりです。

jQuery(window).load(function() { 
    var vimeoPlayers = jQuery('.flexslider').find('iframe'), player;        

    for (var i = 0, length = vimeoPlayers.length; i < length; i++) {            
            player = vimeoPlayers[i];           
            $f(player).addEvent('ready', ready);        
    }       

    function addEvent(element, eventName, callback) {           
        if (element.addEventListener) {                 
            element.addEventListener(eventName, callback, false)            
        } else {                
            element.attachEvent(eventName, callback, false);            
        }       
    }       

    function ready(player_id) {             
        var froogaloop = $f(player_id);             
        froogaloop.addEvent('play', function(data) {                
            jQuery('.flexslider').flexslider("pause");          
        });             
        froogaloop.addEvent('pause', function(data) {               
            jQuery('.flexslider').flexslider("play");           
        });         
    }  

    jQuery(".flexslider")     
    .flexslider({       
        animation: "slide",
        useCSS: false,       
        animationLoop: false,       
        smoothHeight: true,       
        before: function(slider){         
            if (slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
                  $f( slider.slides.eq(slider.currentSlide).find('iframe').attr('id') ).api('pause');       
        }   
    });

});

これが誰かがここに着陸するのに役立つことを願っています:)

于 2012-12-13T17:57:32.937 に答える