1

Flexslider（Woothemes）でHTML5ビデオを正常に実装した人はいますか？ビデオの再生が開始されたら、スライドショーを一時停止する方法がわかりません。Flexsliderのドキュメントを検索しましたが、Vimeoでこれを実現する方法についてのアドバイスしかありません。

4

1 に答える 1

2

私はしばらくflexSlider html5ビデオで遊んでいますが、これが私にとってうまくいきました：

HTML マークアップは、基本的に他の flexslider と同じですが、ビデオが含まれているスライドの ID をメモしてください。

<div class="flexslider" id="slider">
  <ul class="slides">
    <li id="slide1"><img src="./images/slides/slide1.jpg"></li>
    <li id="slide2"><img src="./images/slides/slide2.jpg"></li>
    <li id="slide3"><video id="myVideo" src="./videos/myVideo.mp4" style="width:100%;"></video></li>
  </ul>
</div>

次にジャバ

<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    controlNav: false,
    slideshowSpeed: "5000",
    after: function(){
        // sets active_id to the active slide
        var active_id = $('.flex-active-slide').attr('id');
        //if the active slide is the video slide...  
        if( active_id == "slide3"){
          //play the video and pause the slider
          myVideo.play();
          $('.flexslider').flexslider("pause");
          //when the video has ended, go to the next slide and play the slider
          myVideo.onended = function(){
              $('.flexslider').flexslider("next");
              $('.flexslider').flexslider("play");
          }
        }
    },
  });
});
</script>

それが私のために働いているものです。

スライドが表示されたときに CSS アニメーションを追加する場合は、ビデオを再生する代わりに、アニメーションのクラスを ID に追加してみてください。何かのようなもの：

$(active_id).addClass("slideUp");

これにより、アニメーションがトリガーされるCSSクラスが追加されます..しかし、スライドがループした場合に再びトリガーされるように、スライドが完了したら削除する必要がある場合があります..私はそれで遊んだ経験はあまりありませんが、それはすべきですあなたを正しい軌道に乗せます。それが役立つことを願っています:-)

于 2015-02-09T21:18:05.253 に答える