Question

我使用bxslider在滑块上显示图像和视频，我需要滑块每隔5秒显示图像，但是当视频出现时，视频自动播放直到结束。然后，显示下一张幻灯片。所有这一切都必须循环。

我陷入困境，但这种方法无法正常工作。这是我的问题：

1.-如果我设置了bxslider＆＃34; auto = true＆＃34;要从一个滑块更改为另一个滑块，它会在播放视频时执行此操作。

2.-如果我禁用＆＃34; auto＆＃34;属性第一个视频播放直到结束，然后更改为下一个滑块，但下一个视频不播放。而不是那样，第一个视频再次播放。

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>

之前的代码是通过我在互联网上找到的其他代码制作的。

非常感谢你的帮助，谢谢你！

赫

Answer 1

最后我找到了解决方案。如果有其他人需要，我就把它放在这里。

我使用了一些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

谢谢！

赫

图像和视频滑块自动播放

1 个答案: