Image and Video Slider Autoplay
Im using bxslider to show images and videos on a slider and i need that the slider show images every 5 seconds but when a video appears, the video autoplay until the end. Then, show the next slide. All of this must be in a loop.
Im stuck and this is not working properly. Here are my problems:
1.- If i set the bxslider "auto=true" to change from one slider to another, it does it when the video is playing.
2.- If i disable the "auto" property the first video play until the end and then change to the next slider, but the next video doesn't play. Instead of that, the first video plays again.
3.- It would be great do this without a plugin, because after solve this I need add some PHP to dinamize the content.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/videos.css" rel="stylesheet" />
<link href="css/jquery.bxslider.css" rel="stylesheet"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.bxslider.min.js" type="text/javascript"></script>
<script src="js/jquery.fitvids.js" type="text/javascript"></script>
</head>
<body>
<ul class="bx" >
<li data-idx="0">
<video preload="" class="video-bg vid" id="vid0" >
<source src="video/01.mp4" type="video/mp4">
</video>
</li>
<li data-idx="1">
<img src="video/slider1.jpg">
</li>
<li data-idx="2">
<video preload="" class="video-bg vid" id="vid1" >
<source src="video/02.mp4" type="video/mp4">
</video>
</li>
</ul>
<script>
var vid0= document.getElementById("vid0");
vid0.onended = function(){
bx.goToNextSlide();
bx.redrawSlider();
vid0.load();
vid0.play();
vid1.pause();
}
var vid1= document.getElementById("vid1");
vid1.onended = function(){
bx.goToNextSlide();
bx.redrawSlider();
vid1.load();
vid1.play();
vid0.pause();
}
var bx = $('.bx').bxSlider({
video: true,
useCSS: false,
nextText: '',
prevText: '',
mode:'fade',
infiniteLoop:true,
auto:true,
onSliderLoad:function(currentIndex){
vid0.play();
},
});
</script>
</body>
</html>
The code before is made it by pieces of other codes that i found on internet.
I will appreciate a lot your help thank you!!
Hector
Answer
finally i found a solution. I let it here if someone else need it.
I used some css to change the opacity of the videos and images.
Here is the HTML and Javascript code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/videos.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<video autoplay id="video1" class="video1">
<source src="video/01.mp4" type="video/mp4">
</video>
<video id="video2" class="video2">
<source src="video/02.mp4" type="video/mp4">
</video>
<video id="video3" class="video3">
<source src="video/03.mp4" type="video/mp4">
</video>
<img src="video/slider1.jpg" class="imagenes" id="imagen1">
</div>
<script>
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var imagen1 = document.getElementById('imagen1');
function imgTransition(){
imagen1.style.opacity=0;
video1.play();
video1.style.opacity=1;
}
video1.onended = function(){
video2.play();
video1.style.opacity=0;
video2.style.opacity=1;
}
video2.onended = function(){
video3.play();
video2.style.opacity=0;
video3.style.opacity=1;
}
video3.onended = function(){
video3.style.opacity=0;
imagen1.style.opacity=1;
window.setTimeout(imgTransition, 5000);
}
</script>
</body>
</html>
And here is the CSS:
*{
padding:0;
margin:0;
}
video{
width:100%;
height:100%;
position:absolute;
object-fit:cover;
transition: all 1.2s linear;
z-index: -10;
}
.video1{
opacity:1;
}
.video2{
opacity:0;
}
.video3{
opacity:0;
}
.imagenes{
opacity:0;
transition:opacity 2s;
width:100%;
height:100%;
position:absolute;
object-fit:cover;
z-index: -10;
}
.container {
width:100%;
height:100%;
}
All this code is based on a video on youtube:
https://www.youtube.com/watch?v=Bxy7xspJO14
Thanks!
Hector