播放视频时停止 bxslider

Question

这是我们想要的顺序

滑块自动启动
当视频幻灯片 comes.the 用户点击播放并观看视频时
当视频正在播放时，滑块应该停止
当用户暂停视频时，滑块应该开始

我们使用的是 iframe 而不是视频元素。我们如何实现此功能？

Answer 1

<!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>

播放视频时停止 bxslider

Stop bxslider when the video is playing

javascript

iframe

vimeo

bxslider

froogaloop