如何让settimeout功能在视频结束时工作

Question

视频结束时settimeout功能是否工作？我正试图找到一种方法，在视频结束时延迟点击按钮。我有settimeout要在视频播放完成后运行，但它没有执行。我试着在.click之前做delay()，但效果不太好。

有问题的JS代码：

$('.content-bottom div.tv-main div.webcam-left div.slider-wrap div.slide-wrap div.slider-slide-wrap.video-post.shown div.media-contain video#video-to-play').on('ended',function(){
$(".shown .media-contain").transition({ opacity: 0 });
setTimeout(function(){
$('#next-item').click();
}, 150);
});

完整代码：

var n = $(".slider-slide-wrap").length,
width = 1024,
newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
width = 1024,
newwidth = width * n;
$('.slide-wrap').css({
'width': newwidth
});
$('.slide-wrap2').css({
'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
var thiswid = 1024;
$(this).css({
'left': thiswid * i
});
});
$(".slider-slide-wrap2").each(function (i) {
var thiswid = 1024;
$(this).css({
'left': thiswid * i
});
});
$('.multi li:gt(0)').hide();
$('.slider-wrap').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();

if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
if ($('.shown').is(".video-post")) {
$('.shown #video-to-play').trigger('play');
$(".shown .media-contain").css({"opacity":"0","background":"black","display":"block"}).show().delay(5).animate({opacity:1});
$('.content-bottom div.tv-main div.webcam-left div.slider-wrap div.slide-wrap div.slider-slide-wrap.video-post.shown div.media-contain video#video-to-play').on('ended',function(){
$(".shown .media-contain").transition({ opacity: 0 });
setTimeout(function(){
$('#next-item').click();
}, 150);
});
}
}
});
});
$('.slider-wrap2').scroll(function () {
var scrollLeft = $(this).scrollLeft();
$(".slider-slide-wrap2").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();

if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
});
});
// Video intro
$('#start').click(function() {
$('.video-open-1280 video').trigger('play');
$('#start').css('display','none');
$('#start2').css('display','block');
});
$('#start2').click(function() {
$('.video-open-1280 audio').trigger('play');
$('#start2').css('display','none');
$('#start3').css('display','block');
});
$('#start3').click(function() {
$('.video-open-1280').transition({ x: '-1300px', y: '-1300px',rotate: '45deg' }, 2100);
$('#start3').css('display','none');
$('#start4').css('display','block');
});
$('#start4').click(function() {
$('.video-open-1280').transition({ x: '-1300px', y: '-1300px',rotate: '45deg' }, 2100);
$('#start4').css('display','none');
$('.nav-menu').css('display','block');
setTimeout(function(){
$('audio').animate({volume: 0.05}, 10000);
}, 1500);
setTimeout(function(){
$('audio').animate({volume: 0.0}, 10000);
}, 15000);
});
// nav menu
$("#next-item").on("click", function(){
event.preventDefault();
var $next = $('.slide-wrap .shown').next();
var $next2 = $('.slide-wrap2 .shown').next();
if ($next.length) {
$('.slider-wrap').animate({
scrollLeft: $next.position().left
}, 0);
}
if ($next2.length) {
$('.slider-wrap2').animate({
scrollLeft: $next2.position().left
}, 200);
}
var curr = $('.rundown-items .current').parent(); //find .current's parent
var $children = $('.rundown-items').children();
var firstcal = $children.length;
var actual = firstcal - 9;
$children.each(function (i) {
if (i < actual) {
$(this).addClass('scrollup')
}
});
if (curr.next().length > 0) { 
$('.rundown-items').animate({scrollTop: '+=35px'}, 400);
curr.children('.current').contents().unwrap(); // remove .current
curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
};
});
$('#prev-item').click(function () {
event.preventDefault();
var $prev = $('.slide-wrap .shown').prev();
var $prev2 = $('.slide-wrap2 .shown').prev();
var curr = $('.rundown-items .current').parent(); //find .current's parent
if ($prev.length) {
$('.slider-wrap').animate({
scrollLeft: $prev.position().left
}, 0);
};
if ($prev2.length) {
$('.slider-wrap2').animate({
scrollLeft: $prev2.position().left
}, 200);
};
if (!curr.hasClass("first")) {
if (curr.hasClass("scrollup")){
$('.rundown-items').animate({scrollTop: '-=35px'}, 400);
};
curr.children('.current').contents().unwrap(); // remove .current
curr.prev().wrapInner('<div class="current"></div>'); // add it to the next element
};
});
$('#reload').click(function() {
location.reload(true);
});

body {padding:0;margin:0}
.container{height:770px}
.content-bottom{height:720px}
.nav-contain{padding-top: 13px;padding-left: 20px;}
.slider-wrap{position:relative;width:1024px;height:576px;overflow-y:hidden;overflow-x:hidden}
.slider-wrap2{position:relative;width:1024px;height:60px;overflow-y:hidden;overflow-x:hidden;border-top:5px solid #2e86ab;background:#ebedea;padding-top:5px;text-align:center}
.slide-wrap{position:relative;height:576px;left:0;right:0}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:1024px;height:100%}
.video-open-1280{position:absolute;top:0;left:0;z-index:9999}
.top-nav{background:grey;height:50px;position:relative;z-index:999999999}
.next-item{background:#000;padding:4px 8px;display:inline-block;color:#fff}
.cover-art{height:195px;background:#404e4d}
.tv-main{width:1280px;height:720px;overflow:hidden;background:#ebedea;position:absolute;top:50px;left:0}
.webcam-left{background:green;width:1024px;height:576px}
.nav-right{width:256px;margin-left:1024px;margin-top:-576px;height:576px;background:#ebedea;text-transform:uppercase}
.nav-main .irl-today{padding:7px 10px;border-bottom:2px solid #4d7ea8}
.nav-main .current{background:#4d7ea8;padding:5px 0 5px 8px;color:#fff;margin:-5px 2px -5px -8px}
.rundown-items{overflow:auto;height:350px;width:280.5px}
.rundown-panel{background:#343330;padding:8px 10px 6px;color:#fff}
.logo-right-bottom{background:#2c2c2c;width:256px;height:100%;float:right;border-top:5px solid #2e86ab}
.video-open-1280{border-bottom:5px solid #ccc;border-right:5px solid #ccc;height:720px}
.cover-art .cover-img{position:absolute;right:-14px;top:-25px}
.cover-art .cover-img img{width:300px;height:auto}
.video-post {background:black;margin:0 auto;text-align:center}
.video-post video {height:576px;width:auto}
.override .current{background:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<div class="container">
<div class="top-nav">
<div class="nav-contain">
<button id="next-item" class="button">Next</button>
</div>
</div>
<div class="content-bottom">
<div class="tv-main">
<div class="webcam-left">
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap shown"></div>
                                <div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
                        <div id="video-ID-1" class="slider-slide-wrap video-post">
<div class="media-contain">
<video id="video-to-play" onloadstart="this.volume=0.5" src="https://ia601401.us.archive.org/3/items/5sec-sound-test/5sec%20sound%20test.mov"></video>
</div>
</div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
                        <div id="video-ID-2" class="slider-slide-wrap video-post">
<div class="media-contain">
<video id="video-to-play" onloadstart="this.volume=0.5" src="https://ia601401.us.archive.org/3/items/5sec-sound-test/5sec%20sound%20test.mov"></video>
</div>
</div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
</div>
<div class="nav-right nav-main">
<div class="cover-art"><div class="cover-img"></div></div>
<div class="rundown-panel">rundown</div>
<div class="rundown-items">
<div class="irl-today first"><div class="current">Welcome</div></div>
                                                                                      <div class="irl-today">Item 1</div>
<div class="irl-today">Item 2</div>
                                                                                                                        <div id="video-ID-1" class="irl-today override"><div class="has-video">:Video 1:</div></div>
                          <div class="irl-today">Diary entry 1</div>
<div class="irl-today">Diary entry 2</div>
                                                                                                                        <div id="video-ID-2" class="irl-today override"><div class="has-video">:Video 2:</div></div>
                          <div class="irl-today">Item 3</div>
<div class="irl-today">Item 4</div>
<div class="irl-today">Item 5</div>
<div class="irl-today">Item 6</div>
<div class="irl-today">Item 7</div>
<div class="irl-today">Item 8</div>
<div class="irl-today">Item 9</div>
<div class="irl-today end">The end</div>
</div>
</div>
<div class="logo-right-bottom"></div>
<div class="slider-wrap2">
<div class="slide-wrap2">
<div class="slider-slide-wrap2 shown"><span class="text">IRL TODAY: Saturday, December 7, 2019</span></div>
                                                        <div class="slider-slide-wrap2">
<span class="text"><p>This is item 1</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 2</p>
</span>
</div>
                                            <div class="slider-slide-wrap2 play-video">
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is a diary entry 1</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is a diary entry 2</p>
</span>
</div>
                                            <div class="slider-slide-wrap2 play-video">
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 3</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 4</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 5</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 6</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 7</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 8</p>
</span>
</div>
<div class="slider-slide-wrap2">
<span class="text"><p>This is item 9</p>
</span>
</div>
<div class="slider-slide-wrap2"><span class="text">The end</span></div>
</div>
</div>
</div>
</div>
</div>

Answer 1

这个表达式从未计算为true，所以我无法使它按照您编写它的方式工作：

if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {

当我禁用该条件时，我运行了以下行：

$('.shown #video-to-play').trigger('play');

然而，它在控制台中触发了一个错误：Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.

一旦我启用了自动播放，我发现这一行导致了一个错误：

$(".shown .media-contain").transition({ opacity: 0 });

它应该是：

$(".shown .media-contain").animate({ opacity: 0 });

和：

$("#next-item").on("click", function(){

应为：

$("#next-item").on("click", function(event){

在那之后，这些事件似乎恰当地触发了。