我使用 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"); …Run Code Online (Sandbox Code Playgroud)