Javascript - need to repeat functionality

Question

It's first time I'm using stackoverflow :) I have created an interaction using javascript for playing video with timer. The interaction is... the video will be paused by default and after 3 seconds that will start playing. This same thing I have to repeat three times. Can we do that? I have shared my code here.

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 link for more clarification : jsfiddle code

Oh, sorry mplungjan and Jaromanda X.. I forgot to share my link here. I have shared my link. jsfiddle.net/Coder95/ku6nw8r2/2. And there is no problem there. I want to repeat what I did but don't know hoe to do that. Just started learning.. — vaishnav
– vaishnav, Commented Apr 3, 2019 at 6:49
I'm sharing one more link also dev.netbramha.in/projects/counter-video. Please let me know if you need anything else from me. — vaishnav
– vaishnav, Commented Apr 3, 2019 at 6:52
You need to change the fiddle to use jQuery like this jsfiddle.net/mplungjan/acjgfhkt - and what is happening or not happening that you want to happen? — mplungjan
– mplungjan, Commented Apr 3, 2019 at 6:56

Afaq Ahmed Khan · Accepted Answer · 2019-04-03 07:05:03Z

2

Instead of using setTimeout() in practiceShot() you should call practiceShot() in setInterval like this

 setInterval(function(){ practiceShot(); }, 2000);

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.

for details: setInterval() Method

answered Apr 3, 2019 at 7:05

Afaq Ahmed Khan

2,3222 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vaishnav Over a year ago

Hey Afaq Ahmed Khan, let me try this

Sami Ahmed Siddiqui · Accepted Answer · 2019-04-04 06:38:57Z

1

You may try this - I have applied the addEventListener on video ended event and use videoCounter variable to run the video only 3 times. It is initialized as 2 and gets decremented when the video end.

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>

edited Apr 4, 2019 at 6:38

answered Apr 3, 2019 at 7:14

Sami Ahmed Siddiqui

2,3861 gold badge18 silver badges30 bronze badges

15 Comments

mplungjan Over a year ago

What did you change?

Sami Ahmed Siddiqui Over a year ago

@mplungjan i have applied the addEventListener on video end. You may find the code at the end in JS.

vaishnav Over a year ago

So thanks Sami Ahmed Siddiqui and mplungjan. And one more thing is the video is repeating many times. Can we do that only for three times?

Sami Ahmed Siddiqui Over a year ago

@vaishnav I have updated the code. Please check now. I am initializing videoCounter to 2 and decrementing its value when video ended. so when it becomes 0 video will not repeat itself.

vaishnav Over a year ago

Yes Sami Ahmed Siddiqui, I got that it's working fine :)

|

delashum · Accepted Answer · 2019-04-03 07:06:24Z

0

you can use setInterval(), clearInterval() and a simple counter to repeat something as specific amount of times.

example:

var counter = 0;
var interval_id = setInterval(() => {
  play_video();
  counter++;
  if (counter >= 3) {
    clearInterval(interval_id)
  }
}, 3000);

answered Apr 3, 2019 at 7:06

delashum

8218 silver badges17 bronze badges

1 Comment

vaishnav Over a year ago

Hey delashum, let me try this.

user10704605 · Accepted Answer · 2019-04-03 07:27:27Z

Use onended event handler on video element,

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

Collectives™ on Stack Overflow

Javascript - need to repeat functionality

4 Answers 4

1 Comment

15 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

15 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related