我正在尝试创建由下一个/上一个按钮操作的视频幻灯片，但是，只有单击事件有效。重要的是，视频将自动播放，加载后仅播放第一个视频，并且next / prev按钮应从头开始/重启下一个/ prev视频。
我尝试使用jquery和.load（）进行此操作，以防止所有其他视频在加载时在后台播放。当前，它在第一次单击时有效，但是未注册下一步按钮上的任何事件。
这是一个代码段：
var pos = 0,
slides = $('.slide'),
/*navl = $('.left'),*/
numOfSlides = slides.length;
function nextSlide(){
stopCurrentVideo();
slides.eq(pos).animate({leftq:'-100%'},0);
pos = pos >= numOfSlides-1 ? 0 : ++pos;
slides.eq(pos).css({left:'100%'}).animate({left:0},0);
}
function previousSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'100%'},0);
pos = pos == 0 ? numOfSlides-1 : --pos;
slides.eq(pos).css({left:'-100%'}).animate({left:0},0);
/*navl.eq(pos).css({display:'none'});*/
}
function stopCurrentVideo(){
$('.slider-video:eq('+pos+')').load()
.siblings('.overlay-content').show();
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);
$('#next1.navigation.right').on('click', function() {
$('#video-sequence-2').load('https://cbtesting.s3-us-west-2.amazonaws.com/video-sequencing-1.html #video2');
$('#next1.navigation.right').hide();
});
$('#next2.navigation.right').on('click', function() {
$('#video-sequence-3').load('https://cbtesting.s3-us-west-2.amazonaws.com/video-sequencing-1.html #video3');
/*$('button').hide();*/
});
$('#next3.navigation.right').on('click', function() {
$('#video-sequence-4').load('https://cbtesting.s3-us-west-2.amazonaws.com/video-sequencing-1.html #video4');
/*$('button').hide();*/
});html {
font-size: 16px;
}
body {
font-family: PT Sans, sans-serif;
color: #333333;
line-height: auto;
}
.video-slider {
max-width: 1920px;
height: 1080px;
width:100%;
margin:0 auto;
/*background: #444;*/
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden;
}
.slide:first-child{
left: 0;
}
.overlay-content {
background: #f8f9fa;
position: absolute;
bottom: 40%;
right: 3%;
height: 400px;
width: 400px;
opacity: 0.8;
}
#navigation{
background: none;
position: relative;
padding-top: 5%;
height: 5%;
width: 24%;
float: right;
}
.overlay-content p, h3{
font-family: PT Sans, sans-serif;
position: relative;
font-size:16px;
text-align: left;
line-height: auto;
color:#333333;
padding:5%;
}
.overlay-content p:first-child{
font-family: PT Sans, sans-serif;
position: relative;
font-size:16px;
text-align: left;
line-height: auto;
color:#333333;
padding:5%;
}
.overlay-content h3{
padding-bottom: 1%;
font-size:18px;
}
.navigation.left{
position: inherit;
text-align: left;
display: inline-block;
/* bottom: 10%; */
left: 8%;
cursor: pointer;
opacity: 1;
color: black;
}
.navigation.right{
position: inherit;
display: inline-block;
text-align: right;
/* bottom: 10%; */
right: 8%;
cursor: pointer;
opacity: 1;
color: black;
}
video{
max-height: 100%;
max-width: 100%;
/*pointer-events: none;*/
}
video::-webkit-media-controls {
display: none;
}
video::-webkit-media-controls-play-button {
display: none;
}
video::-webkit-media-controls-volume-slider {
display: none;
}
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-timeline {
display: none;
}
video::-webkit-media-controls-current-time-display{
display: none;
}<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
<video class="slider-video" id="split01" autoplay controls="false">
<source src="https://cbtesting.s3-us-west-2.amazonaws.com/vid1.mp4" type="video/mp4" />
</video>
<div class="overlay-content animated fadeIn">
<div id="navigation">
<div class="navigation right" id="next1">Next</div>
<!-- <div class="navigation left">Previous</div> -->
</div>
</div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<div id="video-sequence-2"></div>
</div>
<!--SLIDE 3-->
<div class="slide">
<div id="video-sequence-3"></div>
</div>
<div class="slide">
<div id="video-sequence-4"></div>
</div>
</div>
外部html页面如下：
<video class="slider-video" id="split02" controls="false">
<source src="https://cbtesting.s3-us-west-2.amazonaws.com/vid2.mp4" type="video/mp4" />
</video>
<div class="overlay-content animated fadeIn">
<h3>Headline02</h3>
<p>
2. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div id="navigation">
<div class="navigation right" id="next2">Next</div>
<!-- <div class="navigation left">Previous</div> -->
</div>
</div>
</div>
<!-- VIDEO 3 -->
<div id="video3">
<video class="slider-video" id="split03" controls="false">
<source src="https://cbtesting.s3-us-west-2.amazonaws.com/vid1.mp4" type="video/mp4" />
</video>
<div class="overlay-content animated fadeIn">
<h3>Headline03</h3>
<p>
3. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div id="navigation">
<div class="navigation right" id="next3">Next</div>
<div class="navigation left">Previous</div>
</div>
</div>
</div>
等
无论用户单击上一个还是下一个，我都尝试重新启动视频。尝试检查第二个下一个按钮时没有错误消息。
任何帮助都非常感谢！