this is our desired sequence
We are using iframe not video element. How we can implement this feature?
<!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&autohide=0&modestbranding=1&showinfo=0&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&autohide=0&modestbranding=1&showinfo=0&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>