图像和视频滑块自动播放答案

【问题标题】：Image and Video Slider Autoplay图像和视频滑块自动播放
【发布时间】：2018-02-08 23:01:01
【问题描述】：

我正在使用 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>

之前的代码是我在网上找到的其他代码。

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

赫克托

【问题讨论】：

标签： javascript jquery video slider autoplay

【解决方案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

谢谢！

赫克托

【讨论】：

如果我有一组图像和视频会怎样？