Hec*_*tor 3 javascript video jquery slider autoplay
我使用 bxslider 在滑块上显示图像和视频，我需要滑块每 5 秒显示一次图像，但是当视频出现时，视频会自动播放直到结束。然后，显示下一张幻灯片。所有这些都必须在一个循环中。
我卡住了，这不能正常工作。这是我的问题：
1.- 如果我将 bxslider "auto=true" 设置为从一个滑块更改为另一个滑块，它会在播放视频时执行此操作。
2.- 如果我禁用“自动”属性，第一个视频会播放到最后，然后切换到下一个滑块，但下一个视频不会播放。取而代之的是，第一个视频再次播放。
3.- 如果没有插件，这样做会很棒，因为在解决这个问题后，我需要添加一些 PHP 来使内容变得简单。
这是代码：
<!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>
之前的代码是由我在互联网上找到的其他代码片段制成的。
我将非常感谢您的帮助谢谢！！
赫克托
最后我找到了解决方案。如果其他人需要它，我就把它放在这里。
我使用了一些 css 来更改视频和图像的不透明度。
这是 HTML 和 Javascript 代码：
<!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>
这是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%;
}
所有这些代码都基于 youtube 上的视频：
https://www.youtube.com/watch?v=Bxy7xspJO14
谢谢！
赫克托