视频结束时如何使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){

之后，事件似乎正常触发。

视频结束时如何使settimeout功能起作用？

How to get settimeout function to work when a video ends?

jquery

delay

html5-video