我有一些代码。它很难解释,所以我想分享链接以便于理解。
http://dev.netbramha.in/projects/timer/practice-shots.html
这完全可以正常工作,因为我得到了堆栈溢出人员的帮助。如果您注意到这项工作中发生的事情,您会看到同一视频重复三次。并且它在视频播放之前显示了三遍“Practice shot 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);
最佳答案
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 - 根据视频的重复更改文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55508897/