Fatal编程技术网
  • javascript/
  • Javascript 播放视频时停止bxslider

Javascript 播放视频时停止bxslider

javascript iframe

Javascript 播放视频时停止bxslider,javascript,iframe,vimeo,bxslider,froogaloop,Javascript,Iframe,Vimeo,Bxslider,Froogaloop,这是我们想要的序列 滑块将自动启动 当视频幻灯片出现时，用户单击“播放”并观看视频 播放视频时，滑块应停止 当用户暂停视频时，滑块应启动 我们使用的是iframe而不是视频元素。如何实现此功能？ <!DOCTYPE html> <html> <head> <title> Bix Slider Start On Hover </title> <link rel="stylesheet" href="css/jqu

这是我们想要的序列

  • 滑块将自动启动
  • 当视频幻灯片出现时，用户单击“播放”并观看视频
  • 播放视频时，滑块应停止
  • 当用户暂停视频时，滑块应启动
    • 我们使用的是
    iframe
    而不是视频元素。如何实现此功能？

    

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

    
Bix滑块悬停启动

      

    • 

    • 

    • 

      • 

    • 

    • 

    

      

    • 

    • 

    • 

      • 

    • 

    • 

    

      

    • 

    • 

    • 

      • 

    • 

    • 

    

      

    • 

    • 

    • 

      • 

    • 

    • 

    
$（文档）.ready（函数（）{
//加载YouTube帧API
（功能（）{
var s=document.createElement（“脚本”）；
s、 src=”http://www.youtube.com/player_api";
var before=document.getElementsByTagName（“脚本”）[0]；
before.parentNode.insertBefore（s，before）；
})();
jQuery（'.product card vimeo player'）。每个（函数（）{
Froogaloop（this）.addEvent（“就绪”，就绪）；
});
功能就绪（playerID）{
}
$（'.product card bxSlider'）。每个（函数（）{
var\u this=$（this）.bxSlider({
模式：'fade'，
汽车：错，
速度:200,，
暂停：3000，
控件：false，
滑动宽度：700，
传呼机：错，
onSliderLoad:function（）{
log（'Slider-loaded'）；
},
onSlideBefore:function（）{
slideInit（）；
}
});
_this.mouseenter（函数（）{
_这个。startAuto（）；
}).mouseleave（函数（）{
_这个.stopAuto（）；
});
函数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'）；
//知道什么类型的视频
var videoType=$（'#'+getFrame）.attr（'class'）；
if（videoType==“产品卡vimeo播放器”）{
vimeo（getFrame）；
}else if（videoType==“产品卡youtube播放器”）{
onyoutubeiframeapiredy（getFrame）；
}
}
}
//维梅奥
功能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）；
}
函数vimeo_onPlay（）{
log（“视频一直在播放”）；
_这个.stopAuto（）；
}
函数vimeo_onPause（）{
log（“视频已暂停”）；
_这个。startAuto（）；
}
函数vimeo_onFinish（）{
log（“视频已经完成”）；
_这个。startAuto（）；
}
//为Youtube
函数onYouTubeIframeAPIReady（id）{
玩家=新的YT玩家（id{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
log（“一切就绪”）；
}
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.end）{
console.log（“视频已结束”）；
_这个。startAuto（）；
}else if（event.data==YT.PlayerState.PLAYING）{
log（“视频一直在播放”）；
_这个.stopAuto（）；
}else if（event.data==YT.PlayerState.PAUSED）{
log（“视频已暂停”）；
_这个。startAuto（）；
}
}
});
});
    请发布与您的问题相关的JavaScript/jQuery、CSS和HTML。使用以下任何或所有服务创建演示：、、或代码段（位于文本编辑器工具栏上的第7个图标或CTRL+M）。