Javascript 图像和视频滑块自动播放_Javascript_Jquery_Video_Slider_Autoplay

Javascript 图像和视频滑块自动播放

javascript jquery video

Javascript 图像和视频滑块自动播放,javascript,jquery,video,slider,autoplay,Javascript,Jquery,Video,Slider,Autoplay,我使用bxslider在滑块上显示图像和视频，我需要滑块每5秒显示一次图像，但当视频出现时，视频会自动播放到最后。然后，放映下一张幻灯片。所有这些都必须在一个循环中我卡住了，不能正常工作。以下是我的问题： 1.-如果我将bxslider“auto=true”设置为从一个滑块切换到另一个滑块，它会在播放视频时执行此操作 2.-如果我禁用“自动”属性，则第一个视频将一直播放到结束，然后切换到下一个滑块，但下一个视频不会播放。相反，第一个视频再次播放 3.-不用插件就可以完成这项工作，因为解决这个问

我使用bxslider在滑块上显示图像和视频，我需要滑块每5秒显示一次图像，但当视频出现时，视频会自动播放到最后。然后，放映下一张幻灯片。所有这些都必须在一个循环中

我卡住了，不能正常工作。以下是我的问题：

1.-如果我将bxslider“auto=true”设置为从一个滑块切换到另一个滑块，它会在播放视频时执行此操作

2.-如果我禁用“自动”属性，则第一个视频将一直播放到结束，然后切换到下一个滑块，但下一个视频不会播放。相反，第一个视频再次播放

3.-不用插件就可以完成这项工作，因为解决这个问题后，我需要添加一些PHP来对内容进行dinamize

代码如下：

<!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>










var vid0=document.getElementById（“vid0”）；
vid0.onended=函数（）{
bx.goToNextSlide（）；
bx.重画滑块（）；
vid0.load（）；
vid0.play（）；
vid1.暂停（）；
}
var vid1=document.getElementById（“vid1”）；
vid1.onended=函数（）{
bx.goToNextSlide（）；
bx.重画滑块（）；
vid1.load（）；
视频1.播放（）；
vid0.pause（）；
}
变量bx=$（'.bx'）.bxSlider({
视频：没错，
useCSS:false，
下一个文本：“”，
上一个文本：“”，
模式：'fade'，
无穷远：没错，
是的，
onSliderLoad:函数（currentIndex）{
vid0.play（）；
},
});

之前的代码是由我在互联网上找到的其他代码组成的

我将非常感谢你的帮助谢谢你

赫克托

我终于找到了解决办法。如果有人需要，我就把它放在这里

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

所有这些代码都基于youtube上的视频：

谢谢

赫克托

如果我有一系列图像和视频，会发生什么？

*{
    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%;
}