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

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);

标签： javascripthtmlcss

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);