javascriptiframevimeobxsliderfroogaloop

Stop bxslider when the video is playing

this is our desired sequence

  1. The slider starts automatically
  2. when the video slide comes.the user clicks play and view the video
  3. when the video is playing the slider should stop
  4. when the user pauses the video ,the slider should start

We are using iframe not video element. How we can implement this feature?

Solution 
  • <!DOCTYPE html>
<html>
<head>
     <title> Bix Slider Start On Hover </title>
     <link rel="stylesheet" href="css/jquery.bxslider.css" />
     <link rel="stylesheet" href="css/main.css" />
</head>
<body>

    <div id="wrapper">
       <div id="product-cards-wrapper" class="clearfix" >

            <div class="product-card">
                <ul class="product-card-bxSlider">
                  <li><img src="images/1.jpg" /></li>
                  <li><img src="images/2.jpg" /></li>
                  <li>

 <iframe class="product-card-vimeo-player" id="player1" type="text/html" width="560" height="318"  src="http://player.vimeo.com/video/126309467?api=1&player_id=player1" ></iframe>

                  </li>
                  <li><img src="images/3.jpg" /></li>
                  <li><img src="images/4.jpg" /></li>
                </ul>
            </div>
            <div class="product-card">
                <ul class="product-card-bxSlider">
                  <li><img src="images/1.jpg" /></li>
                  <li><img src="images/2.jpg" /></li>
                  <li>

 <iframe class="product-card-vimeo-player" id="player2" type="text/html" width="560" height="318"  src="http://player.vimeo.com/video/126309467?api=1&player_id=player2" ></iframe>

                  </li>
                  <li><img src="images/3.jpg" /></li>
                  <li><img src="images/4.jpg" /></li>
                </ul>
            </div>
            <div class="product-card">
                <ul class="product-card-bxSlider">
                  <li><img src="images/1.jpg" /></li>
                  <li><img src="images/2.jpg" /></li>
                  <li>
<iframe class="product-card-youtube-player" width="560" height="318" src="https://www.youtube.com/embed/ZLls1Wn6070?rel=0&amp;autohide=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen="" id="fitvid3"></iframe>
                  </li>
                  <li><img src="images/3.jpg" /></li>
                  <li><img src="images/4.jpg" /></li>
                </ul>
            </div>
            <div class="product-card">
                <ul class="product-card-bxSlider">
                  <li><img src="images/1.jpg" /></li>
                  <li><img src="images/2.jpg" /></li>
                  <li>
<iframe class="product-card-youtube-player" width="560" height="318" src="https://www.youtube.com/embed/ZLls1Wn6070?rel=0&amp;autohide=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" enablejsapi="1" allowfullscreen="" id="fitvid4"></iframe>
                  </li>
                  <li><img src="images/3.jpg" /></li>
                  <li><img src="images/4.jpg" /></li>
                </ul>
            </div>

       </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
    <script src="js/jquery.bxslider.min.js" ></script>
    <script>
      $(document).ready(function(){

            // Load YouTube Frame API
            (function(){
              var s = document.createElement("script");
              s.src = "http://www.youtube.com/player_api";
              var before = document.getElementsByTagName("script")[0];
              before.parentNode.insertBefore(s, before);
            })();

            jQuery('.product-card-vimeo-player').each(function(){
                Froogaloop(this).addEvent('ready', ready);
            });

            function ready(playerID){

            }

            $('.product-card-bxSlider').each(function() {
                var _this = $(this).bxSlider({
                    mode:'fade',
                    auto: false,
                    speed:200,
                    pause:3000,
                    controls:false,
                    slideWidth:700,
                    pager:false,
                    onSliderLoad: function() {
                      console.log('Slider loaded');
                    },
                    onSlideBefore: function() {
                      slideInit();
                    }
                });
                _this.mouseenter(function() {   
                     _this.startAuto();      
                 }).mouseleave(function() {   
                     _this.stopAuto();
                });
                function slideInit(){
                    var currentNum = _this.getCurrentSlide();
                    if (_this.find('li').eq(currentNum).find('iframe').length > 0) {
                       var getFrame = _this.find('li').eq(currentNum).find('iframe').attr('id');
                       //knowing what type of video 
                       var videoType = $('#'+getFrame).attr('class');
                       if(videoType == 'product-card-vimeo-player'){
                              vimeo(getFrame);
                       }else if(videoType == 'product-card-youtube-player'){
                              onYouTubeIframeAPIReady(getFrame);
                       }

                    }
                }
                //For Vimeo
                function vimeo(id){
                    var iframe = document.getElementById(id);
                    var player = $f(iframe);

                    player.addEvent('play',vimeo_onPlay)
                    player.addEvent('pause', vimeo_onPause);
                    player.addEvent('finish', vimeo_onFinish);
                }
                function vimeo_onPlay(){
                    console.log('The video has been Playing');
                     _this.stopAuto();
                }
                function vimeo_onPause(){
                    console.log('The video has been Paused');
                     _this.startAuto(); 
                }
                function vimeo_onFinish(){
                    console.log('The video has been Finished');
                    _this.startAuto(); 
                }
                //For Youtube
                function onYouTubeIframeAPIReady(id) {
                  player = new YT.Player(id, {
                    events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                    }
                  });
                }
                function onPlayerReady(event) {
                  console.log('Everything is ready');
                }
                function onPlayerStateChange(event) {
                      if (event.data == YT.PlayerState.ENDED) {
                            console.log('video has been ended');
                            _this.startAuto(); 
                      } else if (event.data == YT.PlayerState.PLAYING) {
                            console.log('Video has been Playing');
                            _this.stopAuto(); 
                      } else if (event.data == YT.PlayerState.PAUSED) {
                            console.log('Video has been paused');
                            _this.startAuto();
                      }
                }

            });
      });
    </script>
</body>
</html>