这是我第一次使用stackoverflow :) 我创建了一个使用javascript播放带有计时器的视频的交互。互动是...默认情况下,视频将暂停,并在3秒钟后开始播放。同一件事,我必须重复三遍。我们能做到吗?我在这里分享了我的代码。
var timeLeft = 3;
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();
console.log(playPromise);
} 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();
jfiddle链接以进一步说明:jsfiddle code
答案 0 :(得分:2)
您应该像这样在setTimeout()
中调用practiceShot()
而不是在practiceShot()
中使用setInterval
setInterval(function(){ practiceShot(); }, 2000);
setInterval()方法以指定的时间间隔(以毫秒为单位)调用函数或计算表达式。 setInterval()方法将继续调用该函数,直到调用clearInterval()或关闭窗口为止。
有关详细信息:setInterval() Method
答案 1 :(得分:1)
您可以尝试-我在视频addEventListener
事件上应用了ended
,并使用videoCounter
变量仅运行了3次视频。它初始化为2
,并在视频结束时递减。
var timeLeft = 3;
var videoCounter = 2;
var videoText = 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;
}
document.getElementsByClassName("countdown-content__head")[0].innerHTML = "Practice Shot " + videoText;
videoText++;
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);
@import url("https://fonts.googleapis.com/css?family=Fjalla+One");
html, body {
margin: 0;
height: 100%;
font-family: 'Fjalla One', sans-serif;
}
.main-content {
height: 100%;
text-align: center;
}
.video-wrapper {
height: 100%;
display: inline-block;
position: relative;
}
.video-wrapper span {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #FBED20;
opacity: 0.7;
}
.video-wrapper > video {
height: 100%;
margin: 0 auto;
display: block;
position: relative;
}
.countdown-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.countdown-content__head {
margin: 0;
}
.countdown-content__timer {
margin: 10px 0 0 0;
font-size: 24px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid #fff;
position: relative;
opacity: 0;
}
.countdown-content__timer > span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
<span class="video-wrapper">
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<span></span>
</span>
<div class="countdown-content">
<h1 class="countdown-content__head">Practice Shot 1</h1>
<div class="countdown-content__timer">
<span class="countdown-content__count"></span>
</div>
</div>
</div>
答案 2 :(得分:0)
您可以使用setInterval()
,clearInterval()
和一个简单的计数器以特定的时间重复某些内容。
示例:
var counter = 0;
var interval_id = setInterval(() => {
play_video();
counter++;
if (counter >= 3) {
clearInterval(interval_id)
}
}, 3000);
答案 3 :(得分:0)
在视频元素上使用onended事件处理程序,
var timeLeft = 3;
var elem = document.querySelector('.countdown-content__count');
var timerId;
var times = 0 ;
var vid = document.getElementById("video");
vid.onended = function() {
times++;
console.log(times);
times==3 ? $("#video")[0].pause() : $("#video")[0].play();;
};
function countdown() {
if (timeLeft == 0) {
clearTimeout(timerId);
$(".countdown-content__timer").fadeOut();
$(".video-wrapper span").fadeOut();
var playPromise = $("#video")[0].play();
console.log(playPromise);
} else {
elem.innerHTML = timeLeft;
timeLeft--;
}
}
function practiceShot() {
$(".countdown-content__head").slideUp(1000, function () {
$(".countdown-content__timer").css({
opacity: 0,
display: 'inline-block'
}).animate({opacity: 1}, 600);
timerId = setInterval(countdown, 1000);
countdown();
});
}
practiceShot();