Question

我有一些代码。它很难解释，因此我正在考虑共享链接以便于理解。

http://dev.netbramha.in/projects/timer/practice-shots.html

这完全正常，因为我从堆栈溢出人员那里得到了帮助。如果您注意到这项工作中发生了什么，则可以看到同一视频重复了三遍。在播放视频之前，它会显示三遍“练习镜头1”的文字。所以我需要的是，我需要在每次重复播放视频时更改文本，例如

第一个视频的“练习1” 第二个视频是“练习2”，观看第三部视频的“练习2”

我们可以编辑脚本吗？如果可以的话请帮忙。谢谢：）

var timeLeft = 3;
var videoCounter = 2;
var elem = document.querySelector('.countdown-content__count');
var timerId;

function countdown() {
  if (timeLeft == 0) {
    clearTimeout(timerId);
    $(".countdown-content__timer").fadeOut();
    $(".video-wrapper span").fadeOut();
    var playPromise = $("#video")[0].play();
  } else {
    elem.innerHTML = timeLeft;
    timeLeft--;
  }
}

function practiceShot(){
  setTimeout(function(){
    $(".countdown-content__head").slideUp(1000, function(){
          $(".countdown-content__timer").css({
              opacity: 0,
              display: 'inline-block'     
          }).animate({opacity:1},600);
          timerId = setInterval(countdown, 1000);
          countdown();
        });
      }, 2000);
}
practiceShot();
document.getElementById('video').addEventListener('ended', function() {
    if (videoCounter == 0) {
        return;
    }
    videoCounter--;
    timeLeft = 3;
    elem.innerHTML = "";
    $(".countdown-content__timer").fadeIn();
    $(".video-wrapper span").fadeIn();
    $(".countdown-content__head").slideDown(1000, function(){
          $(".countdown-content__timer").css({
              opacity:1,
              display: 'inline-block'     
          }).animate({opacity:0},600);
    });
    practiceShot();
}, false);

Answer 1

document.getElementById('video').addEventListener('ended', function() {
    // ...
    videoCounter--;
    switch (videoCounter) {
        case 1:
            $('.countdown-content__head h3').text('Some thing you want.');
            break;
        default:
            break;
    }
    // ...
}, false);

Javascript-根据视频的重复更改文本

1 个答案: