图像和视频滑块自动播放 [英] Image and Video Slider Autoplay

查看：33
本文介绍了图像和视频滑块自动播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我卡住了，这不能正常工作.这是我的问题:

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

2.- 如果我禁用自动"属性，第一个视频会播放到最后，然后切换到下一个滑块，但下一个视频不会播放.取而代之的是，第一个视频再次播放.

3.- 如果没有插件，这样做会很棒，因为在解决这个问题之后，我需要添加一些 PHP 来使内容变得简单.

代码如下:

<html lang="zh-cn"><头><link href="css/videos.css" rel="样式表"/><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><身体><ul class="bx" ><li data-idx="0"><video preload="" class="video-bg vid" id="vid0" ><source src="video/01.mp4" type="video/mp4"></视频><li data-idx="1"><img src="video/slider1.jpg"><li data-idx="2"><video preload="" class="video-bg vid" id="vid1" ><source src="video/02.mp4" type="video/mp4"></视频><脚本>var vid0= document.getElementById("vid0");vid0.onended = 函数(){bx.goToNextSlide();bx.redrawSlider();vid0.load();vid0.play();vid1.pause();}var vid1= document.getElementById("vid1");vid1.onended = 函数(){bx.goToNextSlide();bx.redrawSlider();vid1.load();vid1.play();vid0.pause();}var bx = $('.bx').bxSlider({视频:真实，使用CSS:假，nextText: '',上一篇:'',模式:'淡入淡出'，无限循环:真，自动:真，onSliderLoad:函数(当前索引){vid0.play();},});</html>

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

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

赫克托

解决方案

我终于找到了解决方案.如果其他人需要它，我就把它放在这里.

我使用了一些 css 来更改视频和图像的不透明度.

这是 HTML 和 Javascript 代码:

<html lang="zh-cn"><头><link href="css/videos.css" rel="样式表"/><身体><div class="容器"><视频自动播放 id="video1" class="video1"><source src="video/01.mp4" type="video/mp4"></视频><video id="video2" class="video2"><source src="video/02.mp4" type="video/mp4"></视频><video id="video3" class="video3"><source src="video/03.mp4" type="video/mp4"></视频><img src="video/slider1.jpg" class="imagenes" id="imagen1">

<脚本>var video1 = document.getElementById('video1');var video2 = document.getElementById('video2');var video3 = document.getElementById('video3');var imagen1 = document.getElementById('imagen1');函数 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);}</html>

这里是 CSS:

<代码>*{填充:0;保证金:0;}视频{宽度:100%；高度:100%；位置:绝对；适合对象:封面；过渡:全1.2s线性；z-索引:-10；}.video1{不透明度:1；}.video2{不透明度:0;}.video3{不透明度:0;}.imagenes{不透明度:0;过渡:不透明度2s；宽度:100%；高度:100%；位置:绝对；适合对象:封面；z-索引:-10；}.容器 {宽度:100%；高度:100%；}

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

https://www.youtube.com/watch?v=Bxy7xspJO14

谢谢！

赫克托

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

解决方案

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

这篇关于图像和视频滑块自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆